将 div id 插入脚本

Question

我有一个脚本，其中单击特定 div（例如 id=packtoa）将（除其他外）.addclass('show') 列出具有与单击的 div 的 id 匹配的类的项目。

效果很好，但是我希望下一个 div (id=packfhag) 做同样的事情，然后是下一个。所以我在我的 js 中多次使用相同的脚本，只是更改了 id 和类名。

我确信有一种非常明显的方法可以自动执行此操作，这样任何 id 以“pack”开头的 div 都会触发此脚本，提取 div id，并将其插入到类名称所在的脚本中调用。

而且我确信我已经接近尝试调整这个脚本了：

$("div[id^=pack]").each(function() {
    var match = this.id.match(/\w+$/)[0];
    $(this).addClass('show');
});

但我就是无法破解它。上面的内容可能有问题，或者我将其插入脚本中的错误位置：

// Tears of Ameratsu menu functions
    $(document).bind('pageinit', function() {
// When link is clicked
  $('#packtoa').click(function() {
// collapse the expansions menu
     $("#expansionsmenu").click();
// hide everything except this expansion
    $(".hidden").removeClass('show');
    $(".packtoa").addClass('show');
// clear the search, and trigger a blank search
   $('input[data-type="search"]').val('');
    $('input[data-type="search"]').trigger("keyup");
    });
}); 

我错过了什么？

Answer 1

// for selecting div which starts with pack
// not recommended
$("div[id^='pack']");

最好的选择是使用class属性，将类属性添加到所有div，然后

$('.commonClass').addClass('show');

例如：

// this is for testing
// say you click  
$('#test').on('click',function(){
  $('.testclass').addClass('show');
});

.testclass{
display:none;
}
.show {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testclass">div1</div>
<div class="testclass">div2</div>
<div class="testclass">div3</div>

<input type='button' value='Click me to view div' id='test' />