隐藏不包含选择框值的内容

Hide content not containing select box value

本文关键字：包含 选择 隐藏      更新时间：2023-09-26

我有一个页面，我想按国家过滤显示的内容，使用选择框。页面最初显示所有内容，但当选择国家时，所有与不匹配的内容都通过添加CSS类隐藏起来。

这是我到目前为止的相关代码:

jsFiddle

HTML: 

<select name="filter" id="filter">
    <option value="" disabled selected></option>
    <option value="France">France</option>
    <option value="Germany">Germany</option>
    <option value="UK">UK</option>
</select>
<div class="media">
    <p>blah blah blah France blah blah</p>
</div>
<div class="media">
    <p>blah blah blah Germany blah blah</p>
</div>
<div class="media">
    <p>blah blah blah Germany blah blah</p>
</div>
<div class="media">
    <p>blah blah blah UK blah blah</p>
</div>
CSS: 

.hidden {
    display: none;
    visibility: hidden;
}
JavaScript: 

$('#filter').change(function () {
    var country = $('#filter').val();
    $('.media').each(function () {
        if ($('.media').find(country)) {
        } else {
            $('.media').addClass('hidden');
        }
    })
});

我对jQuery/JavaScript的经验很少，但我已经调查并认为我需要循环通过所有匹配的内容"块"与each()，每次寻找与find()相关的内容，但我不知道足够得到这个工作。我的代码目前什么也不做。

通常是根据分类或类以及其中的文本进行过滤，而不仅仅是文本…但既然每个问题都有解决办法，这是你的。

http://jsfiddle.net/hardeepmehta/NYCy9/4/

$('#filter').change(function () { var country = $(this).val().toLowerCase(); var elements = []; $('.media').each(function(){ if($(this).text().indexOf(country)==-1) { $(this).hide(); } else { $(this).show(); } }); });

问候。

尝试:

$('#filter').change(function () {
    var country = $('#filter').val().toLowerCase();
    $('.media').each(function () {
        if ($(':contains(' + country + ')', this).length) {
            $(this).removeClass('hidden');
        } else {
            $(this).addClass('hidden');
        }
    })
});
<<p> jsFiddle例子/strong>

你想要这个吗:

$('#filter').change(function () {
   var country = $('#filter').val();
   $('.media').hide();
   $('.media:contains('+ country.toLowerCase() +')').show();
});
演示

或:

$('#filter').change(function () {
   var country = $('#filter').val();
   $('.media').addClass('hidden');
   $('.media:contains(' + country.toLowerCase() + ')').removeClass('hidden');
});
演示

您最好使用自定义data-*属性来区分国家/地区:

<div class="media" data-country="UK">
    <p>blah blah blah UK blah blah</p>
</div>

然后简单地匹配和隐藏:

$('#filter').change(function () {
    var country = this.value;
    $(".media").addClass("hidden");
    $(".media [data-country=" + country + "]").addClass("show");
});
相关文章：