依次执行函数 JQUERY

Question

我是一个有用的助手，可以翻译文本。

我正在使用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组，并针对特定的.class使用.remove和.append函数，以及特定的链接id使用.load函数。

<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>

在这个代码问题中，问题是始终在函数 .remove 和 .append 之前执行 .load 函数。您有任何想法如何使函数 .load 在 .remove 和 .append 之后执行吗？

- user2654186

Answer 1

使用data-*属性的组合和jQuery的.data方法，您可以仅使用一个回调函数来完成工作。

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);
    });
});

- Patrick Evans

---

这只是我的个人意见，但我认为没有必要使用像数据属性这样的花哨东西。出于性能和兼容性的原因，简单才是更好的选择。 - spelufo

Answer 2

很遗憾，我不认为您能保证单击处理程序的顺序。 （请参见下面的说明，了解为什么总是首先调用load。）

我的建议是添加一个“data-”属性来解决这个问题，并添加一个单击事件函数来简化此行为。

$(document).ready(function(){
  var resetContainer = function () {
    var $li = $(this),
        newPage = $li.data('content'),
        $content = $("#div_content"),
        $container = $("#container");

    $content.remove();
    $container.append("<div id='div_content'></div>");
    $content.load(newPage);
  }

  $(".loadPage li").on('click' ,resetContainer);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="menu1">
  <ol>
    <li><a href="#"><b>Choose content</b></a>
      <ul class="loadPage">
        <li id="link_1" data-content='content1.html'><a href="#">Link 1</a></li>
        <li id="link_2" data-content='content2.html'><a href="#">Link 2</a></li>
    </ul>   
    </ol>
</div>

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

-- 更新/解释:

仔细看后，负载功能之所以首先发生是因为事件冒泡。当你点击时，第一个元素是

（实际上是链接，但href =“＃”没有任何作用）。li元素具有.load（）函数，因此它们首先被调用。

一旦所有与li的事件处理完成，浏览器将检查一级向上（在您的情况下，使用.clear_div1的ul。浏览器将触发ul上的任何单击事件处理程序，然后沿DOM树冒泡（沿途检查单击事件），直到它达到顶部或强制停止传播（例如event.stopPropagation（））。

话虽如此，我仍然认为我提供的代码为您打算的内容提供了更清洁，更可扩展的解决方案。祝好运！

- TheIronDeveloper

Answer 3

避免重复是函数的作用。你可以像这样做。

function makeClickHandler(n) {
  return function () {
    $("#div_content").remove();
    $("#container").append("<div id='div_content'></div>");
    $('#div_content').load('content'+n+'.html');
  }
}

$("#link_1").click(makeClickHandler(1));
$("#link_2").click(makeClickHandler(2));

话虽如此，完全删除元素并重新创建可能不是一个好主意。

编辑：个人观点：JQuery不能替代对js的了解。我强烈建议查看this和this。

- spelufo