显示单击按钮的顺序

我正在尝试显示单击按钮的顺序。例如，我有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为"的按钮；三"；，那么它应该显示"；1〃；在按钮顶部。如果我再次点击它，它应该说1&2，然后如果我点击了另一个按钮，那么这个按钮应该是3，因为它是在第三个位置点击的。所以整个事情是我试图显示它们被点击的位置，如果它们被点击多次&"；。附言：我是jquery/javascript的新手，所以我不知道从哪里开始获得想要的结果。

这是纯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>

请记住，您需要将上部封装到一个函数中，并在"；重新初始化"；容器中的按钮操作。

$(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端进行太多编辑。但我建议您对元素使用更好的类名。

我不明白为什么要用'&'分隔数字但这很容易。

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>

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>

相关内容

最新更新

热门标签：