Question

我尝试构建一个菜单/内容解决方案，您可以在其中单击菜单链接，该链接将新div添加到主内容并使用子html加载它。我使用.prepend，所以新打开的内容加载在div的顶部，推动其他内容进一步向下。

    $('#testappend').click(function(event){
        event.preventDefault();
        $('#maincontent').prepend( "<div id='testcontent1' style='display: none; float:left; padding:15px; width:100%;'></div>" );
        $('#testcontent1').load("testhtml");
        $('#testcontent1').show();

但是如果我多次点击相同的链接我不希望它多次堆叠相同的div，所以我需要一些方法来检查div是否已经加载并且可能滚动到那个/或者将它放在又来了。我仍然是jquery的新手，我正在考虑使用变量（布尔值？）。或者这是一种更好的方式吗？

谢谢！

Answer 1

对您而言，有三种不同的想法，现在我已经编辑了其中一个：

if ($("#myDivID").load()) {
  run the code you want to run after the element has been loaded
}

编辑：更好：

if ($("#myDivID").length) {
  return;
}

或.length one的变体：

if (!$("#myDivID").length) {
  run the code you want to run after the element has been loaded
}

Answer 2

您可以在添加之前检查$('#testcontent1').length。如果它等于0，则表示该元素尚未在DOM中，否则它已经存在。

你可以用更紧凑的方式编写everthing：

$('#testappend').click(function(event){
     event.preventDefault();
     if($('#testcontent1').length === 0)
         $("<div id='testcontent1' style='display: none; float:left; padding:15px; width:100%;'></div>")
            .prependTo('#maincontent')
            .load('testhtml')
            .show();
});

Answer 3

我可能会做类似

的事情

var $el;
$('#testappend').click(function (event) {
    event.preventDefault();
    if (!$el) {
        $el = $("<div id='testcontent1' style='display: none; float:left; padding:15px; width:100%;'></div>").prependTo('#maincontent');
    }
    $el.load("testhtml", function () {
        $el.show();
    });
})

此处使用缓存变量来检查它是否已经创建。

在前置之前检查是否已添加/打开div？

3 个答案: