0

残念ながら、プラグインを介して画像でロールオーバー/アクティブ状態を設定することはできません。私はこれを達成しようとしてかなり遠くまで行きましたが、ifステートメントの残りの部分を理解できないため、最初のボタンをクリックすると凹んだ画像が表示され、次のボタンをクリックすると最初のボタンが元に戻ります通常の状態と 2 つ目は凹んだイメージに行きます。これまでの私のコードは次のとおりです。

jQuery(window).load(function() {
jQuery('.thumb1 img, .thumb2 img, .thumb3 img').click(function () {
    var $clicked = jQuery(this);
    jQuery('.thumb1 img, .thumb2 img, .thumb3 img').each(function(){
        var $this = jQuery(this);
        if ($clicked.get(0) === $this.get(0))
            $this.attr('src','/wp-content/uploads/2013/01/new_slide_1_btn_hover.jpg');
        else
            $this.attr('src','/wp-content/uploads/2013/01/new_slide_1_btn.jpg');
    });
}); });

現在、クリック後のすべての画像は、正しくない最初の突き合わせに使用された画像に変わります。クリックするボタンは 3 つあり、それぞれがユニークで、独自のロールオーバー イメージがあります。各ボタンには、thumb1、thumb2、およびthumb3のクラスがあります..どんな助けでも素晴らしいでしょう.私はjavascriptの男ではありませんが、これを理解しようとしています.

4

2 に答える 2

0

私はと呼ばれるクラスselectableまたはあなたがそれを呼びたいものを使用します。

<img class="selectable" src="/wp-content/uploads/2013/01/new_slide_1_btn.jpg"/>

そしてこのjQuery：

$(function(){
    $(".selectable").click(function(){
        //make all the default button
        $(".selectable").each(function(){ 
            $(this).attr("src","/wp-content/uploads/2013/01/new_slide_1_btn.jpg");
        });
        //make the just clicked image the hover button
        $(this).attr("src","/wp-content/uploads/2013/01/new_slide_1_btn_hover.jpg");
    });
});
于 2013-01-28T16:46:04.920 に答える
0

Michael_B の回答を更新します。

$(function(){
    $(".selectable").click(function(){
        //make all the default button
        $(".selectable").each(function(){ 
            $(this).attr("src", $(this)[0].src.replace(/_hover(\..*)/, '$1'));
        });
        //make the just clicked image the hover button
        $(this).attr("src",$this[0].src.replace(/(\..*)$/, '_hover$1'));
    });
});
于 2013-01-28T16:53:15.310 に答える