Question

我在页面上有5个不同的脚本，它们都是一样的：

<script language="javascript">
        $(document).ready(function(){
            $(".hideshow-news").hide();
            $(".roll-li-news").click(function(){
                if ($(".hideshow-news").is(":hidden")) {
                    $(".hideshow-news").slideDown("slow");
                    $(".roll-li-news").removeClass('inactive');
                }
                else {
                    $(".hideshow-news").slideUp("slow");
                    $(".roll-li-news").addClass('inactive');
                }
            });
        });
    </script>
    <script language="javascript">
        $(document).ready(function(){
            $(".hideshow-users").hide();
            $(".roll-li-users").click(function(){
                if ($(".hideshow-users").is(":hidden")) {
                    $(".hideshow-users").slideDown("slow");
                    $(".roll-li-users").removeClass('inactive');
                }
                else {
                    $(".hideshow-users").slideUp("slow");
                    $(".roll-li-users").addClass('inactive');
                }
            });
        });
    </script>
    <script language="javascript">
        $(document).ready(function(){
            $('.hideshow-pages').hide();
            $('.roll-li-pages').click(function(){
                if ($(".hideshow-pages").is(":hidden")) {
                    $(".hideshow-pages").slideDown("slow");
                    $(".roll-li-pages").removeClass('inactive');
                }
                else {
                    $(".hideshow-pages").slideUp("slow");
                    $(".roll-li-pages").addClass('inactive');
                    }
            });
        });
    </script>

有没有办法让这5个脚本全局并在一个脚本中加入它们？我做了不同的课程，因为我的菜单已在许多地方开放。

感谢您的帮助。

Answer 1

是，删除最后四个脚本标记并在第一个标记中使用this selector：

".hideshow-news, .hideshow-users, .hideshow-pages"

Answer 2

快速解决您的问题。删除所有脚本标记和内容，然后将其添加到文档中，最好添加到<head></head>部分。

<script language="javascript">
    $(document).ready(function(){

      var arr = {"news", "pages", "users"};
      var x;
      for (x in arr){
        $(".hideshow-"+x).hide();

        $(".roll-li-"+x).click(function(){
          if ($(".hideshow-"+x).is(":hidden")) {
            $(".hideshow-"+x).slideDown("slow");
            $(".roll-li-"+x).removeClass('inactive');
          }else {
            $(".hideshow-"+x).slideUp("slow");
            $(".roll-li-"+x).addClass('inactive');
          }
        });
      }
    });
</script>

这应该做你需要的，我没有测试它。如果您有其他地方使用相同的结构，请更改数组：

var arr = {"news", "pages", "users", "members", "others"};

但正如Boldewyn所说，你应该更多地了解基础知识。

希望它有所帮助，思南。

使jquery脚本全局化

2 个答案: