Question

我经常负责使用jQuery进行一些基本的DOM操作，并最终编写如下代码：

$( ".filter-air" ).click(function() {
document.location = "http://url.com" + "?filter=air";
});

$( ".filter-land" ).click(function() {
document.location ="http://url.com" + "?filter=land";
});

$( ".filter-water" ).click(function() {
document.location ="http://url.com" + "?filter=water";
});

...etc

在此示例中，我根据点击列表中不同项目（每个列表中包含一个唯一类别）附加的URL参数来过滤WP帖子。

但是，这似乎非常冗长。如果不为每个列表项/参数编写单独的函数，我怎样才能实现这一目标？

Answer 1

您可以使用以下代码

function filterClick(name) {
    console.log(name);
    $( ".filter-"+name ).click(function() {
      document.location = "http://url.com" + "?filter="+name;
    });
}

['air', 'land', 'water'].forEach( (name) => { filterClick(name); } )

Answer 2

你可以做这样的事情

<a href="#" data-filter="air" class="filter">filter-air</a>
<a href="#" data-filter="land" class="filter">filter-land</a>
<a href="#" data-filter="filter-water" class="filter">filter-water</a>

$( ".filter" ).click(function(e) {
  e.preventDefault() // This is to prevent a tag firing
  var filter = $(e.target).data('filter')//<- this gets you the filter from the Data attribute
  console.log("http://url.com?filter=" + filter); //Do your redirect here
});

请参阅此处的工作示例：https://codepen.io/Sensiblemnd/pen/XqgvVO?editors=1111

使各个jQuery函数更简洁

2 个答案: