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”上有一个元素，那么如果我点击它，它应该消失（被删除）。另一个功能（我可能会发现它，如果我单独做第一步，这对你们来说是强制性的）就是如果我点击我的“interperson”列表中的一个元素并且它已经在“printhere”列表中，那么会弹出一条警告消息通知它已被添加的用途。这应该是在javascript中完成而不是在Jquery中，提前感谢 PS。我曾尝试过单独行动，但我很沮丧，因为我发了这篇文章（我通常不会这样做）

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

Answer 2

首先，缺少=

<div id"printhere"> </div>

要获取“已选定”li元素，您可以传递event.target

<ul id="interperson" onclick="addinterpersonal(event.target)">

然后将li的文本添加到printhere div

function addinterpersonal(elt) {
    var myinter = elt.textContent;
    var printlist = document.getElementById("printhere");
    printlist.innerHTML += "<li>" + myinter + "</li>";
}

请参阅JSFiddle

Answer 3

给它一个旋转（请记住，如果你可以使用jQuery，这将更多更简单：

http://jsfiddle.net/79GQp/1/

<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>

<ul id="printhere"> </ul>

请注意，我已将printhere更改为ul，因为您尝试将li附加到其中。

脚本：

window.onload = function () {
    document.getElementById("interperson").onclick = moveToPrint;
    document.getElementById("printhere").onclick = removeItem;
};

function checkElementType(node, type) {
    return node.nodeName.toLowerCase() === type.toLowerCase();
}

function checkForDupe(testNode, dest) {
    var existing = dest.getElementsByTagName("li"), i;

    for (i = 0; i < existing.length; i += 1) {
        if (existing[i].textContent === testNode.textContent) {
            return true;
        }
    }
    return false;
}

function moveToPrint(event) {
    var targ = event.target,
        ph = document.getElementById("printhere");

    if (checkElementType(targ, "li")) {
        if (checkForDupe(targ, ph)) {
            alert("That item has already been added!");
            return;
        }
        ph.appendChild(targ.cloneNode(true));
    }
}

function removeItem(event) {
    var targ = event.target;
    if (checkElementType(targ, "li")) {
        targ.parentNode.removeChild(targ);
    }
};

为了进行比较，以下是使用jQuery完成此操作的方法：

http://jsfiddle.net/79GQp/3/

$(function () {
    $("#interperson").on("click", "li", moveToPrint);
    $("#printhere").on("click", "li", function () {
        $(this).remove();
    });
});

function moveToPrint() {
    var targ = $(this),
        ph = $("#printhere"),
        matchingItems = ph.children("li").filter(function () {
            return this.textContent === targ.text();
        });

    if (matchingItems.length > 0) {
        alert("That item has already been added!");
        return;
    }
    ph.append(targ.clone());
}

Answer 4

以下是您要求的所有内容。

http://jsfiddle.net/e964E/

我确实在列表中使用了唯一ID，以便更容易检查它们是否已存在

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

和JS：

function addinterpersonal(ele){
    //get list of elements in printhere to checkagainst
    var printHereChildren = document.getElementById('printhere').childNodes;
    if(typeof printHereChildren !== "undefined" && printHereChildren.length >0){
        for(var i=0; i<printHereChildren.length; i++){
            if(printHereChildren[i].hasAttribute("data-id") && ele.getAttribute('data-id') == printHereChildren[i].getAttribute('data-id')){
                alert('You have already added: '+printHereChildren[i].innerText);
                return;
            }
        }
    }
    var toAdd = ele.cloneNode(true);
    toAdd.setAttribute('onclick','removePrint(this)');
    document.getElementById("printhere").appendChild(toAdd);
}
function removePrint(ele){
    ele.parentElement.removeChild(ele);
}

单击并从ul列表中“取消选择”元素

4 个答案: