このjQuery関数に「クリック」機能を追加するにはどうすればよいですか？

私のjQueryは、吹き出しをホバー上のよりカラフルなグラフィックに交換しますが、ユーザーが選択した吹き出しを強調する「クリック」機能を追加する方法がわかりません。人が気泡の1つをクリックした場合、そのカラフルな吹き出しのグラフィックに留まるはずです。これは理にかなっていますか？この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

出典

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ああ、申し訳ありません、上記の私の更新を見てください。 – 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関数に「クリック」機能を追加するにはどうすればよいですか？

答えて

関連する問題