javascript – 一个接一个地执行JQUERY函数

2023年5月29日 135次阅读

我正在使用ajax方法.load来替换div的内容.问题是因为我正在使用的库不允许我替换div的内容,因为某些功能仍然在后台运行.

在这种情况下,我决定删除一个特定的div,然后再次添加它,并在最后加载一个div的内容.
为此,我创建了一个代码：

HTML：

<div id="menu1">
  <ol>
    <li><a href="#"><b>Choose content</b></a>
      <ul>
        <li id="link_1"><a href="#">Link 1</a></li>
        <li id="link_2"><a href="#">Link 2</a></li>
    </ul>   
    </ol>
</div>

<div id="container">
<div id="div_content"></div>
</div>

JQUERY

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

        $("#link_1").click(function(){
            $("#div_content").remove();
            $("#container").append("<div id='div_content'></div>");
            $('#div_content').load('content1.html');
         });

        $("#link_2").click(function(){
            $("#div_content").remove();
            $("#container").append("<div id='div_content'></div>");             
            $('#div_content').load('content2.html');
        });
    });
        </script>

使用此代码一切正常.事情在我的菜单中,我将有大量链接到其他内容.这就是为什么我不喜欢在每个链接中使用.remove和.append的重复代码.

为此,我为对象创建了.class组,我使用.remove和.append用于特定的.class和.load函数用于特定的链接ID.

<div id="menu1">
  <ol>
    <li><a href="#"><b>Choose content</b></a>
      <ul class="clear_div1">
        <li id="link_1"><a href="#">Link 1</a></li>
        <li id="link_2"><a href="#">Link 2</a></li>
    </ul>   
    </ol>
</div>

<div id="container">
<div id="div_content"></div>
</div>

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

        $(".clear_div1").click(function(){
            $("#div_content").remove();
            $("#container").append("<div id='div_content'></div>");
        });

        $("#link_1").click(function(){
            $('#div_content').load('content1.html');
        });        
        $("#link_2").click(function(){            
            $('#div_content').load('content2.html');
        });
    });
</script>

在这个代码中,问题是始终.load函数在函数.remove和.append之前执行.
你知道如何在.remove和.append之后执行函数.load吗？

最佳答案 使用
data-* attributes和
jQuery’s .data method的组合,然后您可以使用单个回调来完成工作.

HTML

<ul>
    <li class="content_link" data-path="content1.html" id="link_1"><a href="#">Link 1</a></li>
    <li class="content_link" data-path="content2.html" id="link_2"><a href="#">Link 2</a></li>
</ul>

使用Javascript

$(document).ready(function(){
    //Get all the links with class 'content_link'
    $(".content_link").click(function(){
         //Use the data method to get the value of data-path
         var contentPath = $(this).data("path");
         $("#div_content").remove();
         $("#container").append("<div id='div_content'></div>");
         $('#div_content').load(contentPath);
    });
});
点赞