單擊並從UL列表

Question

「unclicking」元素可以說我有一個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> 

，當我在我的名單上的elents的一個點擊，這個元素是應該出現讓我們在「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

首先，有一個失蹤=

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

給這個一掄（並請記住，這將是多簡單，如果你可以使用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 3

這是你要的一切。

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); 
} 

Answer 4

首先所有的u有修改你的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