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

Question

我有一个页面，我希望按国家/地区使用选择框过滤显示的内容。该页面最初显示所有内容，但是当选择某个国家/地区时，不匹配该值的所有内容都会通过添加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没什么经验，但我已经调查并认为我需要遍历所有匹配的内容＆＃34; block＆＃34;使用each()，每次使用find()查找相关内容，但我不太了解这项工作。我的代码目前无所作为。

非常感谢任何帮助。

Answer 1

通常根据分区或类进行过滤，其中的文本不是单独的文本......但由于每个问题都有解决方案， 这是你的。

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(); } }); });

问候。

Answer 2

尝试：

$('#filter').change(function () {
    var country = $('#filter').val().toLowerCase();
    $('.media').each(function () {
        if ($(':contains(' + country + ')', this).length) {
            $(this).removeClass('hidden');
        } else {
            $(this).addClass('hidden');
        }
    })
});

<强> jsFiddle example

Answer 3

您最好的选择是使用自定义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");
});

Answer 4

你想要这个：

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

Demo

---

或者：

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

Demo