Question

我很擅长选择显示具有匹配年份的隐藏段落。因此，如果我选择2014年，则只显示其中包含2014年的P标签。选择所有显示所有P标签。

<form>
<select id="yearFilter">
<option>All</option>
<option>2014</option>
<option>2013</option>
</select>
</form>

<div id="articles">
<p>The year of 2014 A</p>
<p>The year of 2014 B</p>
<p>The year of 2013 A</p>
<p>The year of 2013 B</p>
</div>

The js:

<script>
var a = $("#articles p:contains('0')").push( $(this).text() );

console.log(a);

</script>

Answer 1

this不会引用您上下文中的任何jQuery对象。

显示/隐藏选择值更改：

<form>
<select id="yearFilter">
<option value="0">All</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
</select>
</form>

<div id="articles">
<p>The year of 2014 A</p>
<p>The year of 2014 B</p>
<p>The year of 2013 A</p>
<p>The year of 2013 B</p>
</div>

JS：

$('#yearFilter').change(function () {
    var year = $(this).val();
    $("#articles p").hide();
    $("#articles p:contains('" + year + "')").show();
});

了解其运作情况：http://jsfiddle.net/KyleKatarn/4grf3d8o/1/

通过select选项过滤div以匹配段落标记内的年份

1 个答案: