Question

我有三个列表，每个项目都有一个按钮工具栏。这些列表是上演，现场和固定的。我正在尝试使用切换按钮在列表之间移动项目。正如您从下面的jsfiddle示例中看到的，我有按钮移动项目，但我遇到了两个问题，我希望得到一些帮助。我是一个视觉学习者，我在Stackoverflow和谷歌上面都是一个没有运气的例子。

备注 - 编辑和废纸篓按钮不会移动项目。我将在每个切换操作中执行ajax调用以提交每个更改，我在我的js文件中注意到这一点。

工作示例：http://jsfiddle.net/RuRdZ/3/

问题：

1 - 当你点击一个按钮，例如在现场列表中“生成”时，该项目会正确移动到实时列表，但此项目上的按钮似乎被禁用 - 移动后我无法删除该项目或者让它再次上演。这将是一个问题，因为我的目标是不刷新页面。

2 - 再次将项目从列表移动到列表时，我试图弄清楚如何使正确的按钮消失/出现。例如，如果我现场制作一个舞台项目，当项目移动时，我想隐藏“现场直播”按钮并显示“舞台”按钮。我尝试了几件事，但我认为我没有使用正确的选择器。在每个标题中，我列出了应该出现在每个列表中的正确按钮。

感谢您的帮助！

Answer 1

不使用克隆，将现有元素附加到另一个元素将其从原始容器元素中删除 - 它解决了按钮事件的问题

在一个处理程序中执行所有操作 - 然后您将获得对按钮的控制以相应地显示或隐藏它们

e.g。

function doAction($element, buttonsToHide, $containerAppendTo) {
  $containerAppendTo.append(element);
  //loop over all buttons inside clicked li
  $('.fg-buttonset', $element).each(function(){
    $currBtn = $(this);

    $currBtn.toggle(!$currBtn.hasClass(buttonsToHide)); //show|hide if needed
  });
}

  $(".doStage").click(function() {
    var $el = $(this).closest('li');
    doAction($el, 'stagedButton', $('#test-list3'));
  });

jQuery：使用切换按钮在多个列表之间移动项目

1 个答案: