javascript - 单击 ul 列表中的 "unclicking"元素

Question

假设我有一个像这样的 ul 列表:

<ul id="interperson" onclick="addinterpersonal(this)">
    <li>Critical and self-critical abilities</li>
    <li>Teamwork</li>
    <li>Interpersonal skills</li>
    <li>Ability to work in an interdisciplinary team</li>
    <li>Ability to communicate with experts in other fields</li>
    <li>Appreciation of Diversity and multiculturality</li>
    <li>Ability to work in an international context</li>
    <li>Ethical commitment</li>
</ul>

<div id"printhere"> </div>

当我单击列表中的某个元素时，该元素应该出现在“printhere”空间中。另外，如果“printhere”上有一个元素，那么如果我单击它，它应该消失(被删除)。另一个功能(如果我单独执行第一步，我可能会找到它，这对你们来说是强制性的)是，如果我单击“人际”列表中的一个元素，并且它已经在“printhere”列表中，则将弹出一条警报消息，通知已经添加的用途。这应该是在 javascript 中完成的，而不是在 Jquery 中完成的，提前致谢附注我尝试过单独做这件事，但我很沮丧，所以我发表了这篇文章(我通常不这样做)

JavaScript 尝试:

function addinterpersonal() {
    var intel = document.getElementById("inter");
    var myinter = document.getElementById("interperson").value;
    var printlist = document.getElementById("selected");
    intercount = intercount +1;
    intel.innerHTML = intercount + " Interpersonal,";
    printlist.innerHTML += "<li>" + myinter + "</li>";
}

Answer 1

首先你必须修改你的html页面。一个小变化..删除 onclick 函数。

HTML:

<ul id="interperson">
    <li>Critical and self-critical abilities</li>
    <li>Teamwork</li>
    <li>Interpersonal skills</li>
    <li>Ability to work in an interdisciplinary team</li>
    <li>Ability to communicate with experts in other fields</li>
    <li>Appreciation of Diversity and multiculturality</li>
    <li>Ability to work in an international context</li>
    <li>Ethical commitment</li>
</ul>

<div id="printhere"></div>

这是 JavaScript:

   function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}

var ul = document.getElementById('interperson');
ul.onclick = function(event) {
    var target = getEventTarget(event);
    var printlist = document.getElementById('printhere');
    var abc = target.innerHTML;
    if(printlist.innerHTML == abc) {
    alert("sameValue");
    }
    else {
        printlist.innerHTML = abc; }

};

我还添加了一个 fiddle 链接。你可以检查一下。 fiddle