显示点击按钮的顺序

Question

我试图显示按钮被点击的顺序。例如我有 html

<button id="one" class="name">Hello</button>
<button id="two" class="name">Hello1</button>
<button id="three" class="name">Hello2</button>
<button id="four" class="name">Hello3</button>
<button id="five" class="name">Hello4</button>

如果我第一次点击任何按钮，例如第三个 id="three"，那么它应该在按钮顶部显示“1”。如果我再次单击它，它应该显示 1&2，然后如果我单击另一个按钮，那么该按钮应该显示 3，因为它是在第三个位置单击的。所以整个事情是我试图显示他们被点击的位置，如果他们被点击多次然后显示他们被点击的数字并用“＆”加入数字。 PS：我是 jquery/javascript 的新手，所以我不知道从哪里开始才能得到想要的结果。

Answer 1

$(function() {
 var click = 0;
$("button.name").click(function(){
  var current = $(this).text();
  var existingClicks = current.split(" ");
  if(existingClicks.length > 1) {
    $(this).text(current+" &"+(++click))
  }
  else {
    $(this).text("clicked = "+(++click))
  }
})
});

我认为这段代码可以完成您想做的事情，而无需在您的 HTML 端进行太多编辑。但我建议您为元素使用更好的类名。

Answer 2

我不明白为什么要用“&”分隔数字，但这很简单。

var btn1Clicks = 0;
var btn2Clicks = 0;
var btn3Clicks = 0;

var btn1 = document.getElementById('one');
var btn2 = document.getElementById('two');
var btn3 = document.getElementById('three');

btn1.addEventListener('click',btnClick);
btn2.addEventListener('click',btnClick);
btn3.addEventListener('click',btnClick);

function btnClick(e){
  let btnclk = 0;
  if (e.target == btn1 || e.target.parentNode == btn1){
    btnclk = btn1Clicks + 1;
    btn1Clicks ++;
  }
  else if(e.target == btn2 || e.target.parentNode == btn2) {
    btnclk = btn2Clicks + 1;
    btn2Clicks ++;
  }
  else{
    btnclk = btn3Clicks + 1;
    btn3Clicks ++;
  }
    
  let s = e.target.getElementsByTagName('div')[0] || e.target;
  
  let str = s.innerText;
  if (str === '' && btnclk == 1){
    str = '1'
  }else{
    str += `&${btnclk}`;
  }
  
  s.innerText = str;
}

.name{
  position: relative;
  padding: 20px;
  background: #1122a9;
  color: white;
  width: 160px;
  margin: 15px;
}

.txt{
  position: absolute;
  top: 0;
  left: 0;
  color: #eee;
}

<button id="one" class="name">Hello <div id="txt"></div></button>
<button id="two" class="name">Hello1 <div id="txt"></div></button>
<button id="three" class="name">Hello2 <div id="txt"></div></button>

Answer 3

这里是纯Javascript的代码。不需要额外的库。您可以运行并在下面的代码片段中尝试。这些步骤可以在这里描述：

设置计数器变量并赋值给0
获取所有按钮元素。
为每个按钮添加事件侦听器以及计数文本和计数器的机制：
- 如果按钮还没有被点击，那么添加clicked = 和计数器的当前状态。
- 否则，只需添加符号 & 和当前计数器状态。

var click = 0;
var buttons = document.querySelectorAll('button.name');
buttons.forEach(button => {
  button.addEventListener('click', function(){
    var current = button.innerText;
    var existingClicks = current.split(" ");
    if(existingClicks.length > 1) {
      button.innerText += ` & ${++click}`;
    }
    else {
      button.innerText = `clicked = ${++click}`;
    }
  });
});

<button id="one" class="name">Hello</button>
<button id="two" class="name">Hello1</button>
<button id="three" class="name">Hello2</button>
<button id="four" class="name">Hello3</button>
<button id="five" class="name">Hello4</button>

如果你想添加重置按钮，你可以将它封装在一个div上并保存它的早期状态：

function click(){
  var click = 0;
  var buttons = document.querySelectorAll('button.name');
  buttons.forEach(button => {
    button.addEventListener('click', function(){
      var current = button.innerText;
      var existingClicks = current.split(" ");
      if(existingClicks.length > 1) {
        button.innerText += ` & ${++click}`;
      }
      else {
        button.innerText = `clicked = ${++click}`;
      }
    });
  });
}

var container = document.querySelector('.container');
var reset = document.getElementById('reset');
reset.addEventListener('click', () => {
  container.innerHTML = `
  <button id="one" class="name">Hello</button>
  <button id="two" class="name">Hello1</button>
  <button id="three" class="name">Hello2</button>
  <button id="four" class="name">Hello3</button>
  <button id="five" class="name">Hello4</button>`;
  click();
});

click();

.container {
  width: 100%;
}

.reset {
  width: 100%;
}

<div class="container">
  <button id="one" class="name">Hello</button>
  <button id="two" class="name">Hello1</button>
  <button id="three" class="name">Hello2</button>
  <button id="four" class="name">Hello3</button>
  <button id="five" class="name">Hello4</button>
</div>
<button id="reset" class="reset">Reset</button>

请记住，您需要将上半部分封装成一个函数，并且运行在您“重新初始化”容器中的按钮操作后

显示点击按钮的顺序

Show the order at which buttons are clicked

html

javascript

css

jquery

jquery-ui