javascript - javascript if else クリックイベント

Question

以下に if else ステートメントを追加しようとしています

$('#togglediv4').click(function(e){
     e.preventDefault();
    $('#link4').attr('src','images/contact_link_clicked.png');
});

クリックイベントがない場合、画像を元の画像に戻したいです。そうしないと、クリックしたすべてのリンクが新しい画像に貼り付けられたままになります。

したがって、画像がクリックされていない場合は、元の画像を表示したいと思います。

$('#link4').attr('src','images/contact_link_original.png');

score 2 · Accepted Answer

attrコールバック関数と三項演算子を使用します。

$('#togglediv4').click(function(e){
     e.preventDefault();
     $('#link4').attr('src',function(i, src){
          return src === 'images/contact_link_original.png'
          ? 'images/contact_link_clicked.png'
          : 'images/contact_link_original.png'
     });
});

score 1 · Accepted Answer

src元のタグの属性を次のように設定するだけです<img>：mages/contact_link_original.png

次に、上記のようにクリックイベントを追加します。

デフォルトでは、div がクリックされていない場合、元の画像が含まれます。

編集：あなたのコメントに基づいて、私は次のことを行います：

すべての画像にクラスを追加する
画像がクリックされると、そのクラスのすべての画像で src 属性を元に戻します。（使用できます$('.imgClass')）
次に、クリックされた画像を新しい画像で更新します。

score 0 · Accepted Answer

私はあなたがこのようなものを探していると思います:

$('#togglediv4').click(function(e){
    e.preventDefault();
    if ($('#link4').attr('src') == 'images/contact_link_original.png') {
        $('#link4').attr('src','images/contact_link_clicked.png');
    }       
});

score 0 · Accepted Answer

私はあなたの質問を正しく理解していないかもしれませんが、次の代わりにmousedownandmouseupイベントを使用する必要があるようですclick:

$('#togglediv4').mousedown(function(e){
    e.preventDefault();
    $('#link4').attr('src','images/contact_link_clicked.png');
}).mouseup(function(e){
    e.preventDefault();
    $('#link4').attr('src','images/contact_link_original.png');
});

javascript - javascript if else クリックイベント

4 に答える 4

Related

Reference