Question

我在各种ID上使用了一个简单的show-hide脚本。现在的问题就在于它现在每个都是一个单独的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();
  });
});

结合文档就绪脚本？

1 个答案: