javascript - 合并文档准备好的脚本？

Question

我正在对各种 ID 使用简单的显示隐藏脚本。问题是，就目前情况而言，每个都是一个单独的 JS，通过 jQuery 调用文档就绪函数。

有没有一种方法可以将其合并到一个更灵活的脚本中，或者至少以某种形式合并到一个脚本中。非常感谢您提前抽出时间!

下面是一个例子:

<script type="text/javascript">
$(document).ready(function () {
    $("#loadDummy7").hover(

    function () {
        $("#dummy7").show();
    }, function () {
        $("#dummy7").hide();
    });
}); 
</script> 
<script type="text/javascript">
$(document).ready(function () {
    $("#loadDummy8").hover(
    function () {
        $("#dummy8").show();
    }, function () {
        $("#dummy8").hide();
    });
});    
</script>

Answer 1

您可以将其组合成一个脚本，如下所示:

$(function(){
  $("[id^='loadDummy']").hover(function() {
    $("#" + this.id.replace('loadD', 'd')).toggle();
  });
});

这使用 attribute-starts-with selector获取所有 id="loadDummyXXX" 控件并查找要使用相应 dummyXXX ID 进行切换的元素。一种更简单的方法是使用类并相对地查找它，例如，如果您的标记如下所示:

<div class="dummyWrapper">
  Stuff
  <div class="dummy" style="display: none;"> More Stuff</div>
</div>

你可以这样做，更干净:

$(function(){
  $(".dummyWrapper").hover(function() {
    $(this).find(".dummy").toggle();
  });
});