gpt4 book ai didi

php - 如何通过 JS/PHP 单击列表项本身将元素从 2 个列表(来自不同区域)移动到 1 个列表?

转载 作者:行者123 更新时间:2023-11-27 22:36:04 25 4
gpt4 key购买 nike

我在设置元素列表并将它们相互移动时遇到了一些问题。

是否可以有多个列表,每个元素中都有一个链接以将其移动到指定列表?即在操作旁边带有加号的操作列表,单击加号并移动到指定的框?此外,是否可以从该页面加载一个灯箱(我猜代码必须是内联的)并将这些名称也移动到特定列表?

Example Images


更广泛地了解我迄今为止所做的努力...

最初的问题是我无法使用列表框,因为它们在每个单独的浏览器中都是本地呈现的。通过列表框我能够设置它,但通过下面的代码触发(在 Stack overflow 上找到)。虽然它为我提供了部分功能,但它没有达到我正在寻找的目标。

document.getElementById('moveTrigger').onclick = function() {

var listTwo = document.getElementById('secondList');
var options = document.getElementById('firstList').getElementsByTagName('option');

while(options.length != 0) {
listTwo.appendChild(options[0]);
}

}

然后我转向 jQueryUI 的可排序功能及其连接多个(最重要的是可设置样式的列表)并在彼此之间拖动的能力。这适用于并排 table ,但它没有提供我一直在寻找的整体可用性。

所以,我已经到了我不确定该往哪里前进的地方。虽然我可以绕过 PHP,但我个人不知道从哪里开始。我愿意接受任何和所有的选择!

最佳答案

如果我没理解错的话,您想在两个列表之间移动元素。当列表 A 中的某个元素被点击时,它应该被移动到列表 B。当列表 B 上的元素被点击时,它应该被移动到列表 A。

假设列表的结构如下:

<div id="listA">
<div class="listItem">
<input type="button" class="action" value="+" />
Action 1
</div>
...
...
</div>

你可以使用 livedelegate一次分配列表元素上的事件。在 listA 上,我们会做:

$("#listA").delegate(".action", "click", function() {
var item = $(this).closest('.listItem');
$(this).val('-');
$("#listB").append(item);
});

这意味着每当在 #listA 中单击具有类 action 的任何元素时,然后找到它所代表的元素 (listItem),并将其移动到列表 B。同样,在列表 B 上,我们执行相反的操作:

$("#listB").delegate(".action", "click", function() {
var item = $(this).closest('.listItem');
$(this).val('+');
$("#listA").append(item);
});

关于php - 如何通过 JS/PHP 单击列表项本身将元素从 2 个列表(来自不同区域)移动到 1 个列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2535324/

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