简化选择器

Question

我一直在努力简化一些查询选择器。我能做的最好的就是这个。

$($(".NextYearDays td[data-index='1'], .NextYearDays td[data-index='2'] , .NextYearDays td[data-index='3']")).on("change", function ()
{

});

有没有办法在不扩展具有相同基本结构的选择器的情况下包含我想要的索引列表？

Answer 1

欢迎来到 Whosebug @Comelius Scheepers！我们希望你喜欢这里。

您可以使用@Chris G 建议的 .filter() 方法，并使用类似 [list-of-indices].includes( ... ):

的方法

$('.NextYearDays td[data-index]').filter(function() {
    return [1,2,3].includes(+$(this).data('index'))
}).on('change', function() {
    //event code here
});

Answer 2

Without JQuery you could use event delegation 并检查事件处理程序中的索引值。

旁注：change 不是 <td> 的有效事件。

const handle = evt => {
  const indx = evt.target.dataset.index;
  if (indx && [2,3,5].find( v => v === +indx )) {
    console.clear();
    console.log(`hi from ${evt.target.dataset.index}`);
  }
};
document.addEventListener("click", handle);

td {cursor: pointer}

<table>
  <tr>
    <td data-index="1"> 1 </td>
    <td data-index="2"> 2 </td>
    <td data-index="3"> 3 </td>
    <td data-index="4"> 4 </td>
    <td data-index="5"> 5 </td>
  </tr>
</table>

简化选择器

Simplify Selectors

javascript

jquery

jquery-selectors