Jquery onclick更改图片 - 3个产品持有者 [英] Jquery onclick change image - 3 Products holders

问题描述

编辑：

我想添加另一个按钮，因此总共有3个按钮，而不是2个。
我该如何操作？我试图添加一个产品持有人三，但如果我点击第一个按钮1，然后按钮3，两个按钮都有相同的背景图像。

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

I有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（）
}）
}）
  

解决方案

你的代码很多，但你需要从这一行删除CSS上的！important ：

img {display：block！important; } 。

它将覆盖显示：无; ，稍后在淡出时应用于该选择图像。如果您将其更改为 img {display：block} ，则该影响按我相信您的意图工作。

EDIT:

I would like to add another button so in total I have 3 buttons instead of 2. How can I do this ? I tried to add a product holder three but then if I click first button 1 and then button 3, both button have the same background image.

Preview: http://gyazo.com/6698586765626a57405f9232baaaf61f.gif

I have 3 buttons, When they click on one of them it changes the image.. So if user clicks on button 1, it changes image. Is the now clicks the button 2 in case he want to select this one button 1 image goes back to normal.

Website: http://productsgiveaway.com/iphone5s/

I would appreciate some help.

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()
    })
})

解决方案

Your code is pretty much there, but you need to remove the !important on the CSS from this line:

img { display: block !important; }.

It is over-riding the display:none; that later gets applied to that Select image when it fades out. If you change that to just img {display: block}, the affect works as I believe you're intending.

这篇关于Jquery onclick更改图片 - 3个产品持有者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！