如何爲這個jQuery函數添加一個'click'函數？

我的jQuery將氣泡更換爲懸停時更加豐富多彩的圖形，但我無法弄清楚如何添加「單擊」功能來突出顯示用戶選擇的氣泡。如果一個人點擊其中一個氣泡，它應該保持在那個色彩豐富的懸停圖形中。這有意義嗎？如何爲這個jQuery函數添加一個'click'函數？

我的HTML有4個圖像設置爲頁面內導航。他們是圖形氣泡。我給每個泡泡都是自己的ID。

$(".WORLD-BTNS").hover(
    function() { 
    var id = $(this).attr('id'); 
    $(this).attr("src","images/buttons/" + id + "-BTN-HOVER.png"); 
    }, function() { 
    var id = $(this).attr('id'); 
    $(this).attr("src","images/buttons/" + id + "-BTN.png"); 
    } 
)

<img class="WORLD-BTNS" id="COLOR" src="images/buttons/COLOR-BTN.png" /> 
<img class="WORLD-BTNS" id="SKINCARE" src="images/buttons/SKINCARE-BTN.png" /> 
<img class="WORLD-BTNS" id="FRAGRANCE" src="images/buttons/FRAGRANCE-BTN.png" /> 
<img class="WORLD-BTNS" id="HAIRCARE" src="images/buttons/HAIRCARE-BTN.png" />

VIEW THE COLOR BTN

VIEW THE COLOR BTN HOVER

來源

2017-08-01 Matie

你可以解決這個具有自己的點擊處理程序問題一類添加到元素，然後讓你的懸停功能排除與該類元素。

像這樣的東西應該工作：

$('.some-container') 
 
.on('mouseover', '.WORLD-BTNS:not(.selected)', function() { 
 
    this.src = 'http://via.placeholder.com/100x100?text='+this.id+' hovered'; 
 
}) 
 
.on('mouseleave', '.WORLD-BTNS:not(.selected)', function() { 
 
    this.src = 'http://via.placeholder.com/100x100?text='+this.id+' normal';  
 
}) 
 
.on('click','.WORLD-BTNS:not(.selected)',function() { 
 
    var $this=$(this); 
 
    $(".WORLD-BTNS.selected") 
 
    .attr('src', 'http://via.placeholder.com/100x100?text='+this.id+' normal') 
 
    .removeClass('selected'); 
 
    $this.addClass('selected'); 
 
    this.src = 'http://via.placeholder.com/100x100?text='+this.id+' selected';  
 
});

img{ 
 
    margin:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="some-container"> 
 
<img class="WORLD-BTNS" id="COLOR" src="http://via.placeholder.com/100x100?text=normal" data-alt-src="http://via.placeholder.com/100x100?text=selected"/> 
 
<img class="WORLD-BTNS" id="SKINCARE" src="http://via.placeholder.com/100x100?text=normal" data-alt-src="http://via.placeholder.com/100x100?text=selected" /> 
 
<img class="WORLD-BTNS" id="FRAGRANCE" src="http://via.placeholder.com/100x100?text=normal" data-alt-src="http://via.placeholder.com/100x100?text=selected" /> 
 
<img class="WORLD-BTNS" id="HAIRCARE" src="http://via.placeholder.com/100x100?text=normal" data-alt-src="http://via.placeholder.com/100x100?text=selected" /> 
 
</div>

來源

2017-08-01 21:16:56 DelightedD0D

它仍然不工作... 我複製並粘貼您的代碼，我的舊代碼...再次，懸停工作正常，但點擊時氣泡不會保持色彩鮮豔。 – Matie

@Matie啊對不起，看到我上面的更新。我們需要使用'.on（）'作爲我們在這裏想要的效果。 – DelightedD0D

現在懸停不起作用，但點擊同時適用於所有按鈕。 – Matie

這是正常使用，測試，並回答我好嗎：

$("document").ready(function(){ 
    sessionStorage.clear(); 
    $(".WORLD-BTNS").on("click", function() { 
     var ai= $(".WORLD-BTNS").length; 
     for (var i=0 ; i<ai ; i++) {// Clear anyone clicked before. 
      $(".WORLD-BTNS").eq(i).attr("src", "images/buttons/" 
       + $(".WORLD-BTNS").eq(i).attr("id") + "-BTN.png"); 
     } 

     var id = $(this).attr('id') ; 
     $(this).attr("src", "images/buttons/" + id + "-BTN-HOVER.png"); 
     sessionStorage.setItem("clicked",id); 
    }); 

    $(".WORLD-BTNS").hover(function() {// Hover effects. 
      var id = $(this).attr('id') ; 
      $(this).attr("src", "images/buttons/" + id + "-BTN-HOVER.png"); 
    } , function() { 
      var id = $(this).attr('id') ; 
      if(sessionStorage.getItem("clicked")!=id) 
       $(this).attr("src", "images/buttons/" + id + "-BTN.png"); 
    }); 
}); 

<html> 
<img class="WORLD-BTNS" id="COLOR" src="images/buttons/COLOR-BTN.png" /> 
<img class="WORLD-BTNS" id="SKINCARE" src="images/buttons/SKINCARE-BTN.png" /> 
<img class="WORLD-BTNS" id="FRAGRANCE" src="images/buttons/FRAGRANCE-BTN.png" /> 
<img class="WORLD-BTNS" id="HAIRCARE" src="images/buttons/HAIRCARE-BTN.png" />

PS。這個想法;以保持點擊的項目ID爲以後檢查，我建議使用「sessionStorage」作爲前面的例子，

來源

2017-08-02 14:11:34

如何爲這個jQuery函數添加一個'click'函數？

回答

相關問題