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数据。当单击columnC中的对象时，它利用eltype数据描述符来切换A列和A列中项目的可见性。 B.

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

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

1 个答案: