1

我之前曾问过一个类似的问题，其答案部分解决了我的问题。

但是现在我需要扩展代码。

当只有两个 div 时，此代码会切换 div 的可见性，但是当添加第三个时，当我想单独显示每组 div 时，它会同时显示第二组和第三组 div '

这个小提琴显示了当前发生的事情； http://jsfiddle.net/richarde/vCjPL/

jQuery

$('.media-thumb a').click(function(){
    $('div[class^="media"]').toggleClass('is-hidden');
    return false;
});

标记（点击事件绑定到这些 div 的锚点）

<div class="media-thumb ">
    <img src="thumb.jpg" />
    <p><a href="#">Link 1</a></p>
</div>
<div class="media-thumb is-hidden">
    <img src="thumb.jpg" />
    <p><a href="#">Link 2</a></p>
</div>
<div class="media-thumb is-hidden">
    <img src="thumb.jpg" />
    <p><a href="#">Link 3</a></p>
</div>

现在我需要扩展上述内容，我不确定我目前的方法是最好的。在我的情况下，我能做些什么来完成这项工作？

提前致谢。

4

3 回答 3

3

如果我理解正确，点击第一个链接，应该让第二个 div 出现，点击第二个链接，应该让第三个 div 出现，依此类推。

如果是这样，那么试试这个：

$('.media-thumb a').click(function(){
    var parentDiv=$(this).parents('div.media-thumb');
    $(parentDiv).toggleClass('is-hidden');
    if($(parentDiv).next('div.media-thumb').length){
       //there is next div.media-thumb; make it visible
       $(parentDiv).next('div.media-thumb').toggleClass('is-hidden'); 
    }else{
        //back to first div
        $('div.media-thumb:first').toggleClass('is-hidden');
    }
    return false;
});​

这是jsfiddle

现在取决于您是否希望 div 占用空间，使您的 css 类.is-hidden{ visibility: hidden}或.is-hidden{display: none}

于 2013-01-03T20:57:00.677 回答
1

更新：我根据添加到问题中的新信息完全改变了答案。

听起来<a>元素应该像“下一步”按钮一样。

我将 HTML 更改为具有第三个元素：

<!-- thumbs -->
<div class="media-thumb ">
    <img src="thumb.jpg" />
    <p><a href="#">Link 1</a></p>
</div>
<div class="media-thumb is-hidden">
    <img src="thumb.jpg" />
    <p><a href="#">Link 2</a></p>
</div>
<div class="media-thumb is-hidden">
    <img src="thumb.jpg" />
    <p><a href="#">Link 3</a></p>
</div>

<!-- images -->
<div class="media pull-left">
    <img src="img.jpg" />
</div>
<div class="media pull-left is-hidden">
    <img src="img.jpg" />
</div>
<div class="media pull-left is-hidden">
    <img src="img.jpg" />
</div>

<!-- text -->
<div class="media-aside">
    <h4>heading 4</h4>
    <p>Text...</p>
    <p class="call-to-action"><a href="someurl">url</a></p>
</div>
<div class="media-aside is-hidden">
    <h4>heading 5</h4>
    <p>Paragraph...</p>
    <p class="call-to-action"><a href="someurl">url</a></p>
</div>
<div class="media-aside is-hidden">
    <h4>heading 6</h4>
    <p>Paragraph...</p>
    <p class="call-to-action"><a href="someurl">url</a></p>
</div>​

此 JavaScript 将循环遍历元素。如果单击“链接 1”，则“链接 2”、第二个img.media.pull-left图像和第二个div.media-aside将显示。如果单击“链接 2”，将显示拇指、图像和文本部分的第三个元素等。

var $divs = $('.media-thumb'),
    $imgs = $('.media'),
    $txts = $('.media-aside'),
    sets = [],
    max = $divs.length,
    cur = 0,
    i = 0,
    $temp;

// create jQuery objects that contains the .media-thumb, .media,
// and .media-aside HTML elements that should be showing at the
// same time. IE, a jQuery object with the 1st .media-thumb, the 1st
// .media, etc.

for (; i < max; i++) {
    sets[i] = $divs.eq(i)
        .add($imgs.eq(i))
        .add($txts.eq(i));
}

// when the <a> is clicked, turn off the current set
// and turn on the next set
$divs.on('click', 'a', function() {
    sets[cur].addClass('is-hidden');
    cur = ++cur % max;
    sets[cur].removeClass('is-hidden');
});

一个 jsFiddle 演示：http: //jsfiddle.net/TvK53/

于 2013-01-03T20:47:54.997 回答
0

如果我正确理解你想要什么，这个例子是这样的 - http://jsfiddle.net/UYLkh/

$('.media-thumb a').each(function(key, el){
    $(el).click(function(){
        $(this).closest('div').toggleClass('is-hidden');
        return false;
    });
});
于 2013-01-03T20:50:39.980 回答