0

我想添加另一个按钮，所以我总共有 3 个按钮而不是 2 个。我该怎么做？我尝试添加产品支架 3，但如果我先单击按钮 1，然后单击按钮 3，则两个按钮都具有相同的背景图像。

预览： http: //gyazo.com/6698586765626a57405f9232baaaf61f.gif

新代码（不起作用）：

$(document).ready(function(){$(".theImage img").click(function(){
    var a=$(this).parent().attr("id")=="product-holder1"?"product-holder2"?"product-holder3":"product-holder1";
    console.log(a);
    $(this).fadeOut();
    $("#"+a+" img").fadeIn();
   });
});

我有 3 个按钮，当他们单击其中一个按钮时，它会更改图像。因此，如果用户单击按钮 1，它会更改图像。是现在单击按钮 2 以防他想选择这一个按钮 1 图像恢复正常。

网站：http ://productsgiveaway.com/iphone5s/

我会很感激一些帮助。

旧代码Javascript：

$(document).ready(function () {
$(".theImage img").click(function () {
    var a = $(this).parent().attr("id") == "product-holder1" ? "product-holder2" : "product-holder1";
    console.log(a);
    $(this).fadeOut();
    $("#" + a + " img").fadeIn()
})
})
4

1 回答 1

0

当您单击图像时，请查看您的控制台。product-holder#一切都乱了套。这是你的问题。我现在明白你为什么要这样设置变量a了。试着用这个....

var a = $(this).parent().attr("id");

你在上面做的和说的一样......

if(id==product-holder1)
    a=product-holder2;
else
    a=product-holder1;

所以你真的在扭转它们，这就是你的问题。只需使用 id 属性来获取父级的 id。

编辑：

试着把这个给我。我不肯定它会起作用，但我想看看它有什么作用

$(document).ready(function(){
    $(".theImage img").click(function(){
        $(".theImage img").fadeIn(); //SPOT 1
        $(this).fadeOut();
    });
});

很高兴看到它有效。这是发生了什么...您将背景图像设置为继续图片，然后将选择放在顶部。因此，您要做的是确保在代码中单击它（SPOT 1）时显示每个选择的图像。然后您使用$(this)选择器来获取您单击的图像，然后将其隐藏。然后它将显示您在下面的背景图像。这会给你你想要的效果。实际上，您使它变得比拉入ID要复杂得多。

于 2013-10-15T15:06:31.490 回答