jquery - JQuery中按名称选择多个按钮

Question

我尝试使用以下代码：

$('button[name^="X,Y,Z"]').on("click",function(){
    // code here
});

替换此代码，但它没有用。任何人都可以在不使用类或 ID的情况下使其更短:)

$('button[name^="X"],button[name^="Y"],button[name^="Z"]').on("click",function(){
    // code here
});

标签： jquery

Answer 1

我不知道该选择器的更紧凑格式，但您可以创建一个函数，从逗号分隔的字符串生成选择器字符串。

const btnNameBegins = function(values) {
  return values.split(',').map(value => 'button[name^="' + value + '"]').join(',')
}

$(btnNameBegins('X,Y,Z')).on("click", function() {
  console.log(this.name);
}).addClass('hilite');

// output the selector string for demonstration
console.log(btnNameBegins('X,Y,Z'));

.hilite {
  outline: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button name="Wstuff">W</button>
<button name="Xstuff">X</button>
<button name="Ystuff">Y</button>
<button name="Zstuff">Z</button>
<button name="4stuff">4</button>

另一个想法是从函数中删除元素类型并过滤选择的<button>元素。这样，您可以更普遍地使用该功能来过滤任何其他选择器。

const nameBegins = function(values) {
  return values.split(',').map(value => '[name^="' + value + '"]').join(',')
}

$('button').filter(nameBegins('X,Y,Z')).on("click", function() {
  console.log('Button: ' + this.innerHTML);
}).addClass('hilite');

$('.active').filter(nameBegins('B,C,D')).on("click", function() {
  console.log('Checkbox: ' + this.value);
}).addClass('hilite');

// output the selector string for demonstration
console.log(nameBegins('X,Y,Z'));

.hilite {
  outline: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button name="Wstuff">W</button>
<button name="Xstuff">X</button>
<button name="Ystuff">Y</button>
<button name="Zstuff">Z</button>
<button name="4stuff">4</button>

<input type="checkbox" name="Astuff" value="A">
<input type="checkbox" name="Bstuff" value="B" class="active">
<input type="checkbox" name="Cstuff" value="C">
<input type="checkbox" name="Dstuff" value="D">
<input type="checkbox" name="Estuff" value="E" class="active">

另请参阅Jquery Selectors 中的 Regex。