如何切换点击，使功能数据不显示第二次？

Question

createData 是一个显示数据的函数，当点击按钮时出现。如何让数据每隔一次点击消失一次？

document.getElementById("clickme").onclick = createData;

Answer 1

let item = document.getElementById("clickme")
let checker = true;

item.addEventListener('click', checkData);


function checkData() {
  if (checker) {
    createData();
  } else {
    clearData();
  }
}

function createData() {
    checker = false;
    console.log('create')
}
function clearData() {
    checker = true;
    console.log('clear')
}

<button id="clickme">
  click me!
</button>

Answer 2

有多种方法可以做到这一点，但最简单的方法就是切换数据的显示状态。此外，不要使用内联事件属性，例如 onclick，因为这是一种已有 25 年以上历史的用于设置事件的遗留技术，该技术在今天已经过时并且可能导致您的代码出现各种问题。相反，请使用 .addEventListener()，这是设置事件的现代 standards-based 方式。

document.getElementById("clickme").addEventListener("click", createData);

const data = document.querySelector(".data");
function createData(){
  // You can have more code in here that updates the data as needed before
  // toggling its display state
  data.classList.toggle("hidden");
}

.hidden { display:none; }

<div id="clickme">Click to toggle display of data</div>
<div class="data hidden">This is the data</div>

Answer 3

好的...如果我没看错，你想要任何其他点击来销毁createData之前的数据，对吗？

因为我看不到 createData，我假设它是一个函数，如下所示：

//your function assumed
function createData(){
  //creating data

  return data
}

如果您想在每次点击 $('#clickme') 时创建数据 return 数据并在您点击其他内容时销毁数据，请尝试以下操作：

$('#clickme').on('click',function(){
  
})

$(document).on('click',function(e){
  youClickedThisId = e.target.id 
  if (youClickedThisId == 'clickme') {
    createData()
    console.log(createData())
  } else {
    //createData( with Parameters to destroy ) or
    //a new function to destroy previously data called: destroyData() 
    console.log(destroyData())
  }
})

let data = 'i`m your data'

function createData() {
  return data
}

function destroyData() {
  data = 'i was your data'
  data = null //or data = ''
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button id="clickme"> CLICK ME </button>
</body>

下一个问题，我建议展示你的代码！希望这个回答能帮到您！

Answer 4

在没有更多上下文的情况下很难提出强烈推荐，但如果您对实际元素中的状态管理感到满意，这里是一个相对简单的解决方案。我认为 VladykoD 的 anser 可能更安全。

这里我向元素添加了一个属性，该属性的值为零。当用户单击该元素时，将触发 checkClickIterationAndCreateData 函数，获取 click_monitor 属性，将其解析为整数，检查该整数是偶数还是奇数，然后将 +1 添加到 click_monitor.

function addCreateDataFunction(elm_id){
    let target_elm = document.getElementById(elm_id);
    target_elm.setAttribute('click_monitor','0');
    target_elm.onclick = checkClickIterationAndCreateData;
}
function checkClickIterationAndCreateData(){
    let click_iteration = parseInt(this.getAttribute('click_monitor'));
    this.setAttribute('click_monitor',click_iteration + 1);
    if(click_iteration % 2 == 0) createData();
    else console.log('do nothing');
}
function createData(){
    console.log('creating data')
}
addCreateDataFunction('clickme')

如何切换点击，使功能数据不显示第二次？

How do you toggle the click so that the function data doesn't display the second time?

html

javascript

css

jquery

json