Выбор нескольких кнопок по именам в JQuery

Question

Я пытался использовать следующий код:

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

, чтобы заменить этот код, но он не работал. У кого-нибудь есть способ сделать его короче :) без использования класса или идентификаторов

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

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 Селекторы .