0

所以我有一个为 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 人，但试图弄清楚这一点。

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 回答