0

我有一些简单的标记来绘制下拉菜单和一些不同复杂度的 div：

<select class='sel'>
    <option data-opt='a'>show only 'a' boxes</option>
    <option data-opt='b'>show only 'b' boxes</option>
    <option data-opt='*'>show all</option>
</select>

<div class='holder'>
    <div class='a'>
        <div>
            <p>Here is some text (A)</p>
        </div>
        <p>Plus more stuff in here.</p>
    </div>
    <div class='a'>
        <p>More text (A)</p>
    </div>
    <div class='b'>
        <p>Here is other text (B)</p>
        <div><span>There is more in here!</span></div>
    </div>
    <div class='b'>
        <p>Even more text (B)</p>
    </div>
</div>

当用户从下拉列表中选择一个选项时，我想隐藏不匹配的 DIV，只显示匹配的 DIV：

$('.sel').change(function() {
    opt = $(this).find(":selected").data('opt');
    console.log('option chosen: '+opt);

    if(opt == '*') { // select all
        console.log('show all');
        $('.holder').show();

    } else { // hide all but this
        $('.holder :not(div'+opt+')').hide();
        $('.holder').find('div'+opt).show();

    }
});

但是，由于某种原因，它不起作用。看起来 hide() 方法隐藏了每个元素（包括主 DIV 的子/兄弟），然后 show() 方法只显示初始 DIV。并且显示全部选项根本不起作用。因此，深度存在一些问题。我怎样才能解决这个问题？

JSFiddle：http: //jsfiddle.net/pnoeric/FjEBY/3/

4

2 回答 2

1

http://jsfiddle.net/FjEBY/6/就是答案。

您的选择器有点偏离，您在位.之前忘记了opt。

$('.sel').change(function() {

    var opt = $(this).find(":selected").data('opt'),
        all = $('.holder').children('div').show();

    if ( opt !== '*' ) {
      all.not('.' + opt).hide();   
    }

});
于 2013-08-30T02:17:06.540 回答
1

演示

$('.sel').change(function () {
    opt = $(this).find(":selected").data('opt');
    console.log('option chosen: ' + opt);
    if (opt == '*') { // select all
        $('.holder').children('div').show()
    } else { // hide all but this
        $('.holder').children('div').show().not('.' + opt).hide();
    }
});

给定一个表示一组 DOM 元素的 jQuery 对象，该.find()方法允许我们在 DOM 树中搜索这些元素的后代，并从匹配的元素中构造一个新的 jQuery 对象。和方法类似.find()，.children()只是后者只沿着 DOM 树向下移动一层。

所以如果你.children()在这里使用会更好

演示

var holder = $('.holder').children('div');
$('.sel').change(function () {
    opt = $(this).find(":selected").data('opt');
    console.log('option chosen: ' + opt);
    if (opt == '*') { // select all
        holder.show()
    } else { // hide all but this
        holder.show().not('.' + opt).hide();
    }
});
于 2013-08-30T02:17:56.447 回答