简化/组合jQuery代码片段

Question

我有两个小的jQuery片段，并将以这种基本的方式添加更多类似的代码;

$(document).on('click', '.show-listings', function(e) {
$(".facetwp-radio[data-value=listings]").click();
});
$(document).on('click', '.show-albums', function(e) {
$(".facetwp-radio[data-value=albums]").click();
});

我如何重写它使它更动态，这样我可以写'show-XXX'其中XXX= [data-value]的值

感谢所有的帮助。

更新所以@Pinguto提供的答案非常有效，但有一个不可预见的后果。

如果我添加一个不相关的类，比如样式，像这样....

$(document).on('click', '.show-listings .another-random-class', function(e) {
$(".facetwp-radio[data-value=listings]").click();
});

. .然后我在控制台得到一个错误，因为两个类都被"检测"和代码中断。

如何限制代码的作用域，使其只考虑具有'。展示——在里面?

固定所以一些标记在过渡期间发生了变化，但这个解决方案最终起作用了…

$(document).on('click', "a[class*='show-']", function(e) {
var c = $(this).attr('class');  // I read the class of the element 
c = c.slice(c.indexOf('show-')) // I delete any classes prior to the desired one 
.split(' ')[0]              // I delete any classes following the desired one
.slice('show-'.length);     // I delete the "show-" from the class 
$(".facetwp-facet .label[data-value="+ c +"]").click();  // If the element exists, then it simulates a click on it. 

});所以非常感谢你@Pinguto。大大赞赏。

附加要求

我想知道我们是否可以扩展此代码以允许超过1个'show'类?

也就是说;

$(document).on('click', '.show-listings .show-members .another-random-class', function(e) {
$(".facetwp-radio[data-value=listings]").click();
});

现在我们将有2个'show-*'类实例，每个实例触发一个单独的'click'。

这可能吗?

Answer 1

我不知道，但我认为没有比这更通用的了:

$(document).on('click', "div[class^='show-']", function(e) {
var c = $(this).attr('class').slice('show-'.length);
$(".facetwp-radio[data-value="+ c +"]").click();
});

Withdiv[class^= 'show-']我选择所有具有加入show-类的元素然后我切断类，以获得具有所需文本的子字符串。:)

更新:

你是对的…其实我没有想过那个可能性。:)

这就是它应该如何去，我已经注释了代码，所以它会更容易让你理解它是如何工作的，并做出任何改变。:)

$(document).on('click', "div[class*='show-']", function(e) {
var c = $(this).attr('class');  // I read the class of the element 
c = c.slice(c.indexOf('show-')) // I delete any classes prior to the desired one 
.split(' ')[0]              // I delete any classes following the desired one
.slice('show-'.length);     // I delete the "show-" from the class 
$(".facetwp-radio[data-value="+ c +"]").click();  // If the element exists, then it simulates a click on it. 
});

小提示:

,div[类^ = '节目']";选择器选择所有START的类用">节目"。例子:

<div class="show-me food dog"></div>

,div[类* = '节目']";选择器选择包含的所有类属性显示"。例子:

<div class="food show-me dog"></div>

为了避免冲突，我建议您使用第一个选择器(div[class^='show-'])，但不知道页面的HTML结构，更通用的第二个选择器可能更有用。

我不知道…你只需要去尝试!:)

Answer 2

你可以创建一个可能的实体数组，然后循环它，例如:

var items = ['listings', 'albums'];
for (var i = 0; i < items.length; i++) {
$(document).on('click', '.show-' + items[i], function (e) {
$('.facetwp-radio[data-value="' + items[i] + '"]').click();
});
}

或者，如果你喜欢es6风格:

let items = ['listings', 'albums'];
items.forEach(item => {
$(document).on('click', `.show-${item}`, e => {
$(`.facetwp-radio[data-value="${item}"]`).click();
});
});