如何查看用戶是否點擊了兩個元素？

我正在選擇菜單上工作。我希望用戶能夠選擇兩個不同的選項並根據他們選擇的內容顯示某些內容。現在，我只是使用圖像來表示選擇。我想知道是否有方法可以查看用戶是否連續選擇/點擊了兩個圖像。用戶點擊兩張圖片後，我希望它們被重定向到另一個頁面並顯示一些內容。如何查看用戶是否點擊了兩個元素？

/*clicked on certain two images*/(function(){ 
    document.location.href="#page"; 
    $('option').css('display', 'inline'); 
});

來源

2012-07-25 Jon

使用類標記選擇和每次點擊後，請檢查如果有兩個選擇：

$('img').click(function() { 
    $(this).toggleClass('selected'); 

    if($('img.selected').length == 2) { 
     alert("Two images selected!"); 
     // Or redirect to new page, etc. 
    } 
});

演示：

http://jsfiddle.net/G9NXA/

這是當然的，一個通用的解決方案。你可能不想使用img作爲你的選擇器，而是一些其他的類來定義你的可選圖像。

如果你想確保點擊/選擇是連續點擊，只需清除選擇，如果用戶點擊任何地方：

演示：http://jsfiddle.net/G9NXA/1/

如果你的意思是空間連續的，而不是時間連續的，這裏是另一個例子：

演示：http://jsfiddle.net/G9NXA/2/

來源

2012-07-25 17:49:45

完美答案。我正在刪除我的。 – pat34515 2012-07-25 17:51:24

你剛剛打敗了我：P – 2012-07-25 17:53:35

雖然你應該做'$（'。selected'）。length'來允許混合和匹配標籤類型。要查看是否特定選擇了$（'＃img1'）'和'$（'＃img2'）'，則if條件變爲'if（$（'＃img1'）。hasClass（'selected'）&& $ （'＃img2'）。hasClass（'selected'））' – 2012-07-25 17:59:18

如果您不希望存儲的JavaScript狀態，你可以嘗試添加標記類到選定的圖像上的點擊數有多少被發現然後重定向。

來源

2012-07-25 17:46:28

這是我想出了最簡單的方法：

var tracker = []; 

$('*').click(
    function(e){ 
     e.stopPropagation(); 
     var lastEl = tracker.length ? tracker.pop() : '', 
      tag = this.tagName.toLowerCase(); 
     tracker.push(tag); 
     if (tag == lastEl) { 
      doSomething(); 
     } 
     else { 
      return false; 
     } 
    });

JS Fiddle demo。儘管（並且阻止事件的傳播/冒泡，所以你應該在選擇器中比我在這裏更具體）;但是，它還將每個單擊元素的標籤名稱存儲在數組中，然後將當前單擊的元素的標籤名稱與先前單擊的項目的標籤名稱進行匹配。

如果兩者相同，則if評價返回true並執行doSomething();否則，點擊處理程序返回false，並且沒有任何反應。

來源

2012-07-25 17:49:42

這要看情況。如果圖像是兄弟節點，您可以檢查.prev（）和.next（）。點擊圖像，然後點擊「imageClicked」類。然後檢查.prev（）或.next（）是否也有該類。

$('img').click(function() { 
    var clickedImg = $(this); 

    clickedImg.toggleClass('imageClicked'); 

    if(clickedImg.hasClass('imageClicked')) { 
     if(clickedImg.prev().hasClass('imageClicked') || 
     clickedImg.next().hasClass('imageClicked')) 
      alert('Siblings Selected!'); 
    } 
});

來源

2012-07-25 17:50:11 QueueHammer

如何查看用戶是否點擊了兩個元素？

回答

相關問題