堆棧內存溢出
  簡體   English   中英

跟蹤多個按鈕以及單擊了多少個按鈕

[英]Keeping track of multiple buttons and how many each have been clicked

 原文  2016-02-27 18:53:28  1   8    javascript

問題描述

我的html中有多個clickable元素，並希望跟蹤每個按鈕的點擊次數。 我可以做一個非常優雅的解決方案，其中包括為每個按鈕都具有特定的功能，例如功能button1（），功能button2（）等...由onclick調用，但我相信這樣做的更好方法是。 謝謝您的幫助。 

<div class="starter">
        <h3>Starter</h3>
        <div class="starterItems">
            <button type="button" id="salmon" >Salmon Tartare with fresh diced tomatoes</button>
            <button type="button" id="prawn" >Prawn Cocktail with homemade marrinade</button>
            <button type="button" id="soup">Asparagus Soup served with croutons</button>
        </div>
</div>


var salmon = document.getElementById('salmon'), 
prawn = document.getElementById('prawn'),
soup = document.getElementById('soup'),
clicks = {}; 

function click(e){
var id = e.target.id; 
if(!clicks[id])
    clicks[id]=0;
clicks[id]++;
e.target.textContent = clicks[id];
}

salmon.addEventListener('click', click); 
prawn.addEventListener('click', click); 
soup.addEventListener('click', click);

8 個解決方案

解決方案1
 2  2016-02-27 19:02:35

使用元素的id作為鍵： 

 var b1 = document.getElementById('b1'), b2 = document.getElementById('b2'), b3 = document.getElementById('b3'), clicks = {}; function click(e) { var id = e.target.id; if (!clicks[id]) clicks[id] = 0; clicks[id]++; e.target.textContent = clicks[id]; } b1.addEventListener('click', click); b2.addEventListener('click', click); b3.addEventListener('click', click); 
 <button id="b1">Button 1</button> <button id="b2">Button 2</button> <button id="b3">Button 3</button>

使用data-屬性： 

 var b1 = document.getElementById('b1'), b2 = document.getElementById('b2'), b3 = document.getElementById('b3'); function click(e) { if (!e.target.getAttribute('data-clicks')) e.target.setAttribute('data-clicks', 0); var clicks = parseInt(e.target.getAttribute('data-clicks')); e.target.setAttribute('data-clicks', clicks + 1); e.target.textContent = clicks + 1; } b1.addEventListener('click', click); b2.addEventListener('click', click); b3.addEventListener('click', click); 
 <button id="b1">Button 1</button> <button id="b2">Button 2</button> <button id="b3">Button 3</button>

而且，正如其他人提到的那樣，使用localStorage也是有效的選擇。 該實現將類似於使用id作為上方的鍵。

解決方案2
 1  2016-02-27 18:58:55

這實際上取決於您現有的代碼庫。 一種簡單的方法是為要跟蹤的所有按鈕（例如，一個類）都有一個標識符。 然后，您只需為該特定類綁定和事件。 就如此容易。

舉個例子，對於每個按鈕（或其他任何元素，都沒有關系），我們將選擇以下屬性作為標識符： data-count-clicks 。 為了給他們一個身份，上述標識符也將具有可選值。 例如，我們將有類似data-count-clicks="salmon"或data-count-clicks="prawn" 。

這適用於動態生成的元素（不要忘記檢查控制台日志）： 

 (function() { var counter = {}; document.addEventListener('click', onClickFn); function onClickFn(event) { var el = event.target; while (el) { if (matches(el, '[data-count-clicks]')) { var elemName = el.getAttribute('data-count-clicks') || 'nameless'; if (typeof counter[elemName] === 'number') { counter[elemName] += 1; } else { counter[elemName] = 1; } console.log(counter); } el = el.parentElement; } } // Polyfill for element.matches // https://developer.mozilla.org/en-US/docs/Web/API/Element/matches function matches(elm, selector) { var matches = (elm.document || elm.ownerDocument).querySelectorAll(selector), i = matches.length; while (--i >= 0 && matches.item(i) !== elm); return i > -1; } })(); 
 <body> <button data-count-clicks="salmon">salmon</button> <button data-count-clicks="prawn">prawn</button> <button data-count-clicks="soup">soup</button> <button data-count-clicks>no name</button> <button data-count-clicks>no name</button> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quisquam!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nostrum repellendus consectetur, doloribus eaque nobis rerum minima aut porro ducimus possimus eligendi <strong data-count-clicks="strong-tag">you can also click me</strong> expedita corrupti, ut vero atque ratione fugiat itaque, voluptatum. Quidem, ullam.</p> <p data-count-clicks="nested--parent"><strong data-count-clicks="nested--child">nested clicks</strong> </p> </div> </body>

一個更簡單的解決方案，不適用於動態生成的元素（請不要忘記檢查控制台日志）： 

 (function() { var counter = {}; var clickElements = document.querySelectorAll('[data-count-clicks]'); for (var i = 0; i < clickElements.length; i++) { clickElements[i].addEventListener('click', onClickFn); } function onClickFn() { var elemName = this.getAttribute('data-count-clicks') || 'nameless'; if (typeof counter[elemName] === 'number') { counter[elemName] += 1; } else { counter[elemName] = 1; } console.log(counter); } })(); 
 <body> <button data-count-clicks="salmon">salmon</button> <button data-count-clicks="prawn">prawn</button> <button data-count-clicks="soup">soup</button> <button data-count-clicks>no name</button> <button data-count-clicks>no name</button> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quisquam!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nostrum repellendus consectetur, doloribus eaque nobis rerum minima aut porro ducimus possimus eligendi <strong data-count-clicks="strong-tag">you can also click me</strong> expedita corrupti, ut vero atque ratione fugiat itaque, voluptatum. Quidem, ullam.</p> <p data-count-clicks="nested--parent"><strong data-count-clicks="nested--child">nested clicks</strong> </p> </div> </body>

解決方案3
 1  2016-02-27 18:58:57

優雅的解決方案是根據需要使用localStorage or sessionStorage 。 

var count = 0;
function yourFunction(e) {        
    count= parseInt(count) + parseInt(1); 
    localStorage['button1'] = count; OR
    localStorage[e.target.id] = count; OR 
}

您肯定可以通過獲取id of the button的id of the button而不是'button1'來改進代碼，在localStorage設置並在下次獲取它是更簡單的方法。 實際上，如果您也可以將對象持久存儲在localStorage 。

解決方案4
 0  2016-02-27 18:58:18

為每個按鈕分配相同的CSS類，並為所有按鈕分配相同的功能。 （請注意，您需要使用jQuery。） 

$(".myClass").on("click", function(event){

  var clickedButtonId = event.target.id;

  // here you have id of the button that is clicked, and you can do whatever you want with that id

});

該功能僅定義一次，並且為您的所有按鈕提供服務。

解決方案5
 0  2016-02-27 19:00:02

你可以在jQuery中做一些事情

js： 

 $('.button').on('click', function(){
      $(this).attr('data-counter', parseInt($(this).attr('data-counter') + 1) );
 });

HTML： 

<button class="button" data-counter="0"></button>

這樣做，您將每個計數器分別放在數據計數器屬性中。

解決方案6
 0  2016-02-27 19:03:55

創建一個對象以及每個按鈕的計數器，例如： 

var buttonClicks = {};

在每次單擊按鈕的處理程序中，調用一個為您更新該對象的函數。 例如 

function incrementButtonCounter(buttonId) {
    if (typeof buttonClicks[buttonId] === 'undefined') {
          buttonClicks[buttonId] = 1;
          return;
    }

    buttonClicks[buttonId]++;
}

確保incrementButtonCounter功能可以看到buttonClicks對象即它們必須在同一個名字-最好不要全局。

解決方案7
 0  2016-02-27 19:10:02

我將為每個bata創建一個具有計數數據的對象。 

var count = {
  'btn1': 0,
  'btn2': 0,
  'btn3': 0
}

並在單擊按鈕時增加字段。 

function handle(item) {
  var clickedBtnId = item.target.getAttribute('id');
  count[clickedBtnId]++;
  update();
}

function update() {
  document.getElementById('result').innerHTML = 'Btn 1 ' + count.btn1 + ' clicks <br/>' +
    'Btn 2 ' + count.btn2 + ' clicks <br/> ' +
    'Btn 3 ' + count.btn3 + ' clicks';
}

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

btn1.onclick = handle;
btn2.onclick = handle;
btn3.onclick = handle;

jsFiddle上的工作示例

解決方案8
 -1  2016-02-27 18:59:47

您可以這樣做： 

  var buttons = {}; function handleBtnClick(btnName) { buttons[btnName] = (buttons[btnName] || 0) + 1; } 
 <button onclick="handleBtnClick('muFirstButton')">my button 1</button> <button onclick="handleBtnClick('muSecondButton')">my button 2</button>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何檢查在javascript中單擊了多少個按鈕？ 按鈕和復選框無法相互跟蹤 如何跟蹤已按下jquery的按鈕 跟蹤頁面上每個鏈接被點擊了多少次 僅在單擊兩個按鈕時如何操作元素 如何檢查JS中是否已單擊多個div？ 如何在頁面重新加載后跟蹤哪些按鈕被按下？ 設計一個簡單的系統來跟蹤鏈接被點擊的次數 跟蹤並顯示用戶單擊我網站上的按鈕的次數 單擊並打開子菜單后，如何使按鈕保持在原位
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM