如何为这个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'函数？

回答

相关问题