jquery - 如何向此 jQuery 函数添加 'click' 函数？

Question

我的 jQuery 在悬停时将气泡交换为更丰富多彩的图形，但我不知道如何添加“单击”功能来突出显示用户选择的气泡。如果一个人点击其中一个气泡，它应该停留在彩色悬停图形中。这有道理吗？

我的 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

Answer 1

您可以通过让点击处理程序向相关元素添加一个类，然后让悬停函数排除具有该类的元素来解决此问题。

这样的事情应该有效:

$('.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>