Jquery 脚本路障：如何跨多个 div 显示/隐藏多个图像？

Question

我有一些网页设计问题，我正在尝试用高效的 Jquery 来解决，它让我在过去的一天里陷入困境。所以我想我应该向 StackOverflow 的专家寻求帮助。

挑战：

我有一个包含三个 div 列的页面。第 1 列显示全分辨率图像。第 2 列显示当前在第 1 列中显示的元素的大缩略图。第 3 列是一个选择器列，显示我可以添加的所有可用元素。

我一直在尝试使用高效的 jquery 编写以下两个函数，但没有运气：

• 如果您单击第 3 列（完整选择列）中的任何项目 - 它相应地使该项目的 div 在 2 中可见并在 1 中可见
• 如果您单击第 2 列上任何项目的关闭按钮，它会隐藏第 2 列中相应的 div 和第 1 列中相应的 div。

参见示例：http://jsfiddle.net/mzhang23/CGfzq/8/ - 这个试图实现下面的 html5“data-eltype”建议的解决方案，但没有运气。我做错了什么？

Answer 1

我认为关键是您应该将数据与对象正确存储。您可以通过 CSS 描述符或 HTML5 样式数据来执行此操作。

然后你的对象看起来像这样：

<div class="columnA">
   <div class="element house"></div>
</div>

<div class="columnB">
   <div class="element house"></div>
</div>

<div class="columnC">
   <div data-eltype="house" class="element"></div>
</div>

<script type="text/javascript">
$(document).load(function(){
    $('.columnC .element).click(function(){
       $('.columnA, .columnB').find('.' + $(this).data('eltype')).show();
    }); 
});
</script>

虽然有多种方法可以做到这一点，但上面介绍的是一段简单的代码，它利用了 CSS 选择器和 HTML5 数据。当单击 C 列中的对象时，它会利用 eltype 数据描述符来切换 A 列和 C 列中项目的可见性。 B.

如果您需要超出此基本级别描述的其他帮助，您可以考虑使用更详细的对象集构建 JSFiddle。