Javascript 在div中显示图像并隐藏其他图像

我有20箱；用户只需选择其中一个。 现在我的问题来了。 我该怎么做？如果用户更改了选择，我将如何使用jQuery自动淡出之前的选择

演示在这里：

HTML:

JQUERY

---

只需在显示单击的图标之前将其隐藏：

$(document).ready(function() {
    $('div.tik').css('display','none');
    $('div.zoom-box').click(function() {
        $('div.zoom-box div.tik').addClass('untik') // I've added this line...
        $('div.zoom-box div.tik p').fadeOut(200) // ...and this.

        $(this).children("div.tik").fadeToggle(200); // show untik" sign
        $(this).children("p").fadeToggle(200); // hide '?' sign
        $(this).children("div.tik").toggleClass('untik'); // showuntik" sign
        $(".tik .untik").fadeOut();
    });
});

---

也许你可以用更少的javascript和更多的CSS来实现这一点

CSS3转换可用于衰落效果

.zoom-box .tik {
  opacity:0;  
  ....
}
.zoom-box.untik .tik {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

然后只需使用javascript切换类并隐藏标记有特定类的类：

$'div.zoom-box'。单击函数{ //附加untik类 $this.toggleClass'untik'； //显示untik符号并淡出这个人的untik兄弟姐妹 $this.birds'.untik'.fadeOut； }; .缩放框{ 利润率：0.10px； 颜色：fff； 位置：相对位置； 字号：2em； 字体系列：无衬线； 字体大小：粗体； 光标：指针； } .zoom框p{边距：0；填充：0；} .缩放框，.tik{ 背景：橙色； 宽度：50px； 高度：50px； 文本对齐：居中； 浮动：左； } .缩放框.tik{ 不透明度：0； 颜色：绿色； 位置：绝对位置； 排名：0； } .zoom-box.untik.tik{ 不透明度：1； 过渡：不透明度。25秒缓进缓出； -moz过渡：不透明度。25秒缓进缓出； -webkit过渡：不透明度。25秒易入易出； } ？

X ？

X ？

X ？

X

---

那么你想隐藏除了你点击的那一个之外的所有东西吗？你能发布一张点击前后的图片吗？@ZachLeighton just show confirm sign in div wich clicked，no others@亲爱的，所有部门都是“？”。当点击它时，会出现'√';谢谢@Larz，但是你的代码会完全消失！我只想在其他分区中淡出“X”符号。谢谢again@M-O-H-S-E-N您在上面的问题中没有提供任何CSS，所以这个效果来自于我编写的CSS。如果要将其用作指南，只需将“X”包装在一个span或div中，然后在此处针对要淡出的兄弟姐妹的子元素$this.sides'.untik'.fadeOut；我确信您已经知道了如何选择同级元素的子元素：*我确信您已经知道了如何调整此选项以选择jquery中新的同级元素sim的子元素。我真正的第一个问题是！我的语言不是英语母语，因此我无法很好地描述

$(document).ready(function() {
    $('div.tik').css('display','none');
    $('div.zoom-box').click(function() {
        $(this).children("div.tik").fadeToggle(200); // show untik" sign
        $(this).children("p").fadeToggle(200); // hide '?' sign
        $(this).children("div.tik").toggleClass('untik'); // showuntik" sign
        $(".tik .untik").fadeOut();
    });
});

$(document).ready(function() {
    $('div.tik').css('display','none');
    $('div.zoom-box').click(function() {
        $('div.zoom-box div.tik').addClass('untik') // I've added this line...
        $('div.zoom-box div.tik p').fadeOut(200) // ...and this.

        $(this).children("div.tik").fadeToggle(200); // show untik" sign
        $(this).children("p").fadeToggle(200); // hide '?' sign
        $(this).children("div.tik").toggleClass('untik'); // showuntik" sign
        $(".tik .untik").fadeOut();
    });
});

.zoom-box .tik {
  opacity:0;  
  ....
}
.zoom-box.untik .tik {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}