Question

以下FIDDLE显示了我当前的标记。

HTML

<div class="popup-inner-content main-content">          
    <div class="inner-section one">
        <!-- images -->
        <div class="media pull-left">
            <img src="#" />
        </div>

        <!-- text -->
        <div class="media-aside pull-right">
            <h4>Head</h4>
            <p>Body</p>
        </div>
    </div>

    <div class="inner-section three is-hidden">
        <!-- images -->
        <div class="media pull-left">
            <img src="#" />
        </div>

        <!-- text -->
        <div class="media-aside pull-right is-hidden">
            <h4>Head</h4>
            <p>Body</p>
        </div>
    </div>

    <div class="inner-section two is-hidden">
        <!-- images -->
        <div class="media pull-left ">
            <img src="#" />
        </div>

        <!-- text -->                       
        <div class="media-aside pull-right">
            <h4>Head</h4>
            <p>Body</p>
        </div>                          
    </div>

    <div class="thumbnail pull-left">
        <!-- thumbnail -->
        <div class="media-thumb one">
            <img src="#" alt="media-thumbnail" title="media-thumbnail" />
            <p><a href="#">Anchot text</a></p>
        </div>
    </div>

    <div class="thumbnail pull-left">   
        <!-- thumbnail -->
        <div class="media-thumb two pull-left">
            <img src="#" alt="media-thumbnail" title="media-thumbnail" />
            <p><a href="#">Anchor text</a></p>
        </div>
    </div>

    <div class="thumbnail is-hidden">
        <!-- thumbnail -->
        <div class="media-thumb three ">
            <img src="#" width="128" height="69" alt="media-thumbnail" title="media-thumbnail" />
            <p><a href="#">Anchor Text</a></p>
        </div>
    </div>

    </div>
</div>

我想要做的是总是有两个缩略图div，并且一次只能看到一个内部div，并且当单击任何内部的锚点时，基本上能够切换内部部分和缩略图div。 thumbnail div。

我怎样才能使用jquery来实现这个目标？

Answer 1

使用此： http://jsfiddle.net/nHXEs/6/

function displayItem(showItem) {
  $('div.thumbnail').show();
  $('div.thumbnail .' + showItem).parent().hide();

  $('div.inner-section').hide();
  $('div.inner-section').filter('.' + showItem).show();
}

$(document).ready(function() {
    displayItem('one');

    $('div.thumbnail').click(function () {
      var showItem = '';
      if ($('.media-thumb', $(this)).hasClass('one')) {
          showItem = 'one';
      } else if ($('.media-thumb', $(this)).hasClass('two')) {
          showItem = 'two';
      } else {
          showItem = 'three';
      }

      displayItem(showItem);
    });
});

这就是你要找的东西。但我希望如此。

这不是最好的解决方案，因为你使用类来识别你的物品，但是如果你的时间恰好有3个砰砰声和大元素，那就可以了。

更好的解决方案是使用id`s来识别元素

<div class="thumbnail" id="thump_three">

Answer 2

你没有解释如何决定你想要显示哪两个缩略图的逻辑，但这里是我认为你的意思的一个很好的起点，通过切换它应该允许你扩展它。这只会显示每个元素中的一个。

这个想法是JS不需要知道“一个”，“两个”，“三个”等等，只是为无数的选项工作。

<p><a href="#one">Anchor text</a></p>

给锚点一个你可以使用的引用，因为找到那些将是“一个”，“两个”，“三个”等的类将会有更多的工作。

你可以在几行中做到这一点，但我已经明白发生了什么。

$('.thumbnail  a').on('click', function(e){
    e.preventDefault();

    // find the wrapper (.thumbnail) and hide it
    var $wrapper=$(this).closest('.thumbnail');
    $wrapper.hide();

    // find the next one
    var $next=$wrapper.next();
    // if this was the last one get the first instead
    if (!$next.length) $next=$wrapper.siblings().filter(':first');

    // show it
    $next.show();

    // now deal with the element that's elsewhere
    var ref=this.href.replace('#','');

    $('.inner-section.' + ref).show().siblings().hide();

});

一旦你设置了这个行为，为了节省你自己再次编写代码（或者需要定义函数），只需在最后一个元素中触发一个锚点，这样就可以显示第一个元素。

$('.thumbnail:last a').trigger('click');

隐藏/显示多个div jquery

2 个答案: