gpt4 book ai didi

javascript - 将 jQuery Accordion 元素从一个 Accordion 移动到另一个 Accordion

转载 作者:行者123 更新时间:2023-11-30 05:50:24 27 4
gpt4 key购买 nike

有点奇怪,这个。我有两个 jquery Accordion 实体,在点击一个 Accordion 中的一个项目时,我想将它动态添加到第二个 Accordion 中,并将其隐藏在原件中。

目前从 A 移动到 B 以及从 B 移回 A 时效果很好,但是当我将一个项目移回原始 Accordion 时,从 A 到 B 的任何后续移动都会搞砸。

这是我的意思的 jsfiddle 示例 http://jsfiddle.net/waveydavey/CAYth/ .请注意,我非常清楚代码很丑陋——我只是在学习这些东西。请随时提出更好 10 倍的方法。执行以下操作:

  • 运行 fiddle 。
  • 点击每个项目的“+”移动到 Accordion 2
  • 一切都很好。

现在这样做:

  • 运行 fiddle 。
  • 点击任意“+”移动到第二个 Accordion
  • 在移动的项目上单击“x”,它会重新出现在第一组中
  • 点击任何“+”项目添加到第二组
  • Accordion 项的显示完全困惑

如有任何建议,我们将不胜感激。

jsfiddle代码是:

    $(function() {
// create accordion entities
$('#avAccordion').accordion({
collapsible: true,
autoHeight: false,
active: false
});
$('#assignedAccordion').accordion({
collapsible: true,
autoHeight: false,
active: false
});
$('.accordionAdd').click(function(){
// destroy the accordion, prior to rebuilding
$('#avAccordion').accordion('destroy');
// get the h3 part and tweak it's contents
var h3bit = $(this).parent().clone();
$(h3bit).removeClass('freeContacts').addClass('assignedContacts');
$(h3bit).children('span').removeClass('ui-icon-circle-plus accordionAdd').addClass('ui-icon-circle-close accordionDel');
// get the div part after the h3
var divbit = $(this).parent().next().clone();
// rebuild original accordion
$( "#avAccordion" ).accordion({
collapsible: true,
autoHeight: false,
active: false
});
// move contents to other accordion
$('#assignedAccordion').append(h3bit)
.append(divbit)
.accordion('destroy')
.accordion({
collapsible: true,
autoHeight: false,
active: false
});
// hide original accordion entry
$(this).parent().hide();
//attach click handler to new item
$('.accordionDel').click(function(){
dropAssignedContact(this);
return false;
})
return false;
});

function dropAssignedContact(obj){
// unhide right hand object with appropriate data-id attr
var id = $(obj).parent().attr('data-id');
// delete myself
$(obj).parent().remove();
// unhide original
$('.freeContacts[data-id='+id+']').show();
$('#assignedAccordion').accordion('destroy').accordion({
collapsible: true,
autoHeight: false,
active: false
});
}
});

最佳答案

查看更新后的 fiddle :http://jsfiddle.net/KTWEd/

function dropAssignedContact(obj){
// unhide right hand object with appropriate data-id attr
var id = $(obj).parent().attr('data-id');

// delete myself
$(obj).parent().next().remove(); // <--- Removes the adjacent div
$(obj).parent().remove();

// unhide original
$('.freeContacts[data-id='+id+']').show();
$('#assignedAccordion').accordion('destroy').accordion({
collapsible: true,
autoHeight: false,
active: false
});
}
});

关于javascript - 将 jQuery Accordion 元素从一个 Accordion 移动到另一个 Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15222306/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com