Question

所以我有一个为WP驱动的网站运行的滑块插件，不幸的是，通过该插件，您无法使用图像设置翻转/活动状态。我试图实现这个目标已经有点远，但是无法弄清楚if语句的其余部分所以当你点击第一个按钮时它会显示凹进的图像，然后点击下一个按钮，第一个按钮返回到常规状态和第二个进入凹陷图像。到目前为止，这是我的代码：

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的家伙，但试图解决这个问题。

Answer 1

我会使用一个名为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");
    });
});

Answer 2

更新 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'));
    });
});

jQuery滑块if语句翻转图像

2 个答案: