Jquery 脚本路障 : how to show/hide multiple images across multiple divs?

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>

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

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