我正在嘗試顯示按鈕被點擊的順序。例如，我有一個html
< button id="one"/span> class="name"/span>> Hello</button>
<button id="wo" class="name"> Hello1</button>
<button id="three"/span> class="name"/span>> Hello2</button>
<button id="四" class="name"> Hello3</button>
<button id="五" class="name"> Hello4</button>
如果我第一次點擊任何按鈕，比如說第三個id="three "的按鈕，那么它應該在按鈕的頂部顯示 "1"。如果我再次點擊它，它應該顯示1&2，然后如果我點擊另一個按鈕，那么這個按鈕應該顯示3，因為它是在第三位置被點擊的。 所以，整個事情就是我想顯示它們被點擊的位置，如果它們被多次點擊，那么顯示它們被點擊的數字，并用"& "連接這些數字。 PS：我是jquery/javascript的新手，所以我不知道從哪里開始，以獲得預期的結果。
uj5u.com熱心網友回復：
$(function(/span>) {
var click = 0;
$("button.name").click(function(){
var current = $(this).text() 。
var existingClicks = current.split(" "/span>)。
if(existingClicks.length > 1) {
$(this).text(current " &" （ click）)
}
else {
$(this).text("clicked =" ( click)
}
})
});
我認為這段代碼可以達到你想要的效果，不需要在你的HTML方面做很多編輯。但是我建議你為這些元素使用更好的類名。
uj5u.com熱心網友回復：
我不明白你為什么要用'&'來分隔數字，但這很簡單。
。var btn1Clicks = 0;
var btn2Clicks = 0;
var btn3Clicks = 0;
var btn1 = document.getElementById('one') 。
var btn2 = document.getElementById('wo')。
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;
}span class="hljs-selector-class">.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"/span> class="name"/span>> 你好 <div id="txt"/span>>。 </div></button>
<button id="wo" class="name"> Hello1 < div id="txt"> < /div></button>
<button id="three"/span> class="name"/span>> Hello2 < div id="txt"> < /div></button> uj5u.com熱心網友回復：
這里是純Javascript的代碼。不需要額外的庫。你可以在下面的片段中運行和嘗試。其步驟可以在此描述：
設定計數器變數并將其賦值為0
。
獲取所有的按鈕元素。
對于每個按鈕，添加事件監聽器以及計數文本和計數器的機制：
- 如果按鈕還沒有被點擊，那么添加
clicked =以及計數器的當前狀態。 - 否則，只需添加逗號
&和當前的計數器狀態。
var click = 0;
var buttons = document.querySelectorAll（'button.name'）。
buttons.forEach(button => {
button.addEventListener('click', function(>/span>) {
var current = button.innerText;
var existingClicks = current.split(" ") 。
if(existingClicks.length > 1) {
button.innerText = ` & ${ click}`。
}
else {
button.innerText = `clicked = ${ click}`。
}
});
});< button id="one"/span> class="name"/span>> Hello</button>
<button id="wo" class="name"> Hello1</button>
<button id="three"/span> class="name"/span>> Hello2</button>
<button id="四" class="name"> Hello3</button>
<button id="五" class="name"> Hello4</button> 轉載請註明出處，本文鏈接：https://www.uj5u.com/net/319902.html
標籤：