Question

我有一个放在左侧的项目列表（itemDrop），并希望在选中时将其添加到右侧的框中（itemList）。条款：无法选择同一项目，无法选择3个以上的项目。只能编辑javascript文件，HTML文件不可修改。

HTML：

<div id="itemSelectHeader"> <H2>Item List</H2>
<div id="itemSelect">SELECT FROM HERE
<div id="itemDrop" class="itemSetup">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>
</div>
</div>
</div>
<div id="itemListSection">
    <H3>Items Selected</H3>
    <div id="itemList" class="itemSetup"> <ul></ul></div>
</div>

附加组件： -单击清除按钮时清除框 -仅在选择了3个项目时提交

    <div id="itemBtn">
         <button type="button" id="clearItem">CLEAR ALL</button>
         <button type="button" id="selectItem">SUBMIT</button>
    </div>

尝试了以下按钮以清除按钮，但它不起作用。但是为警报工作

    $("#clearItem").click(function(){
        //alert("try");
        $("#itemList").reset();
    });

Answer 1

您可以通过标签选择器以html格式获取列表，然后将click事件侦听器添加到第一个列表，以将子级追加到第二个列表。

查看以下内容：

let lists = document.getElementsByTagName("ul");

lists[0].addEventListener("click",function(e) {         
        if(e.target && e.target.nodeName == "LI" && lists[1].childElementCount<3) {           
            lists[1].appendChild(e.target)
        }
    });

<div id="itemSelectHeader"> 
<H2>Item List</H2>
<div id="itemSelect">SELECT FROM HERE
<div id="itemDrop" class="itemSetup">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>
</div>
</div>
</div>
<div id="itemListSection">
    <H3>Items Selected</H3>
    <div id="itemList" class="itemSetup"> <ul></ul></div>
</div>

Answer 2

这将为您服务。 Terms: unable to select the same item, unable to select more than 3 items. Can only edit javascript file

    let counter = 0;
let selectedItem = [];
let drop = document.querySelector("#itemList ul");
let lists = document.querySelectorAll("#itemDrop ul li");
for (let i = 0; i < lists.length; i++) {
     lists[i].addEventListener("click", function() {
        appendPlace(i, lists[i]);
     });
}

function appendPlace(itemNo, item) {
	if(!selectedItem[itemNo] && counter < 3)
	{
		let x = document.createElement("LI");
  		let t = document.createTextNode(item.innerHTML);
  		x.appendChild(t);
		drop.appendChild(x);
		selectedItem[itemNo] = 1;
		counter++;
	}
}

单击后，将左侧项目添加到右侧框中

2 个答案: