将 .detach() 与页面上的多个 ajax 元素一起使用

Posted 2023-02-16

【中文标题】将 .detach() 与页面上的多个 ajax 元素一起使用

【英文标题】：Using .detach() with multiple ajax elements on a page

【发布时间】：2012-05-31 15:05:06

【问题描述】：

我正在使用 jQuery ajax 将数据库中的内容加载到页面中。我有多个内容 div，但一次只想查看一个 div。

我已经成功地将元素从 dom 中分离出来，但我不知道如何管理多个 div，以便一次只显示 1 个 div（而其他 div 保持分离）。

下面是我的代码，这里是一个 Fiddle：http://jsfiddle.net/XkzUK/

html：

<nav>
<ul id="site-nav">
<li class="nav1"><a href="#recent">Recent</a></li>
<li class="nav2"><a href="#highlights">Highlights</a></li>
</ul>
</nav>

<div id="content-listing">

<div id="recent">
<ul class="top-level">
</ul>
</div><!--end recent-->

<div id="highlights">
<ul class="top-level">
</ul>
</div><!--end highlights-->

</div><!--end content-listing-->​

JS：

var test; var test2
     //Recent $("#site-nav .nav1").on("click", function (event) 
    $("#site-nav li a").parents().removeClass("nav-active");
    $(this).addClass("nav-active");
    if(typeof test === 'undefined') 
        test = $("#recent ul.top-level").load('/echo/html/',  html: '<li>1</li> <li>2</li> <li>3</li>' , function () 
            //$(this).show().siblings().detach();
            alert("I'm new");
        );
     else 
        test.appendTo("#content-listing");
        alert("I'm old");
    
    event.preventDefault(); );

//Highlights $("#site-nav .nav2").on("click", function(event) 
    //test = $("#recent").detach();
    $("#site-nav li a").parents().removeClass("nav-active");
    $(this).addClass("nav-active");
    if(typeof test2 === 'undefined') 
        test2 = $("#highlights ul.top-level").load('/echo/html/',  html: '<li>Apples</li> <li>Oranges</li> <li>Pears</li>' , function () 
            //$(this).show().siblings().detach();
            alert("I'm new");
        );
     else 
        test2.appendTo("#content-listing");
        alert("I'm old");
    
    event.preventDefault(); );​

CSS：

.nav-active,.nav-active abackground-color:#fff;color:#e84182 !important;outline:none;
.sub-active,.sub-active abackground-color:#fff;color:#e84182 !important;border:dotted 1px pink;border-width:1px 0 ;margin:-1px 0;outline:none;/*background:url(/assets/img/icon-branch.png) 2% 5px no-repeat #fff;*/

#content-listingbackground-color:#ea528d;/*230px*/
#content-listing ul.top-level ul limargin-left:5.882352941176%
#content-listing li afont-size:.8125em;line-height:1em;text-decoration:none;padding:2px 0;display:block;text-indent:2.678571428571%;outline:none;
.visitedcolor:#ccc;

#content-listing ulz-index:4;position:relative;/*230px*/
#content-listing ul.top-levelmargin-top:5.3125em/*85px*/;
#content-listing ul.top-level ul limargin-left:6.521739130435%;
#content-listingwidth:29.113924050633%;float:left;padding-bottom:20010px;margin-bottom: -20000px;
#content-listing li atext-indent:6.521739130435%;/*15px*/​

还有 jsFiddle：http://jsfiddle.net/XkzUK/

【参考方案1】：

如果你想修复这个代码，当附加一个标签主体时，如果它已经被初始化，你也应该分离另一个标签。

if(test2) test2.detach()

更通用的代码是：

for(var i = 0; i < tabs.length; i++) 
    if(i != tabIndexToShow && tabs[i] != null) 
        tabs[i].detach()
    

http://jsfiddle.net/nLMas/1/

但是，您应该认真考虑使用JQuery UI tabs（例如），它可以满足您的要求。

另外，请在此处发布之前清理、缩进和注释您的代码（或者更好，一直；=）

【讨论】：

谢谢，这样的作品，但不适用于最初的点击。您会注意到第一次单击时两个选项卡都存在，但在连续单击后消失：jsfiddle.net/XkzUK/1。此外，jQuery UI 选项卡使用 detach()？换句话说，jQuery UI 选项卡会重新加载数据库中的内容吗？这就是我要避免的。

JQuery Ui 选项卡使用 display = none 来隐藏选项卡，这很好。它不会每次都重新创建选项卡。您有很多选择，只需浏览演示。至于初始化，我更新了我的答案和你的小提琴

谢谢，效果很好。如果我想再添加 2 个标签，我怎么能用你修改过的代码来管理呢？比如这里：jsfiddle.net/XkzUK/3

它似乎有效。但是，如果您选择不使用 JQuery UI 选项卡，则应该认真考虑一种重用代码的方法，而不是一遍又一遍地复制/粘贴相同的行。例如，您可以考虑一个选项卡数组，并循环遍历该数组的元素......但这有点像重写 jQuery UI 选项卡

对，这就是我要问的部分内容。我想把它变成一个函数，但我想知道如何用你修改过的代码来容纳更多的选项卡？ if(test2) test2.detach(); 等？如果您在 Fiddle v3 中四处点击，选项卡会分崩离析，因为我不确定如何考虑额外的选项卡？