클릭하고 UL 목록

Question

에서 "unclicking"요소는 내가이 일 같은 UL 목록이 말할 수 공간 "printhere"에서 말할 수 있습니다. 또한 "printhere"에 요소가있는 경우 클릭하면 사라집니다 (삭제됨). 또 다른 기능 (첫 번째 단계 만 수행하면 나에게 찾아야 할 수도 있습니다). "interperson"목록에서 요소를 클릭하면 이미 "printhere"목록에있는 것입니다. 그러면 경고 메시지가 나타납니다 이미 추가 된 사용을 알립니다. 이것은 javascript가 아니라 Jquery에서 수행해야합니다. 미리 감사합니다 ps. 난 혼자 그 일을 시도했지만 나는 (내가 일반적으로 그렇게하지 않는다)이 게시물

자바 스크립트를 시도했다 너무 좌절 :

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

다음

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

이 JSFiddle

Answer 2

이 소용돌이를 부여 참조하십시오 (당신이 jQuery를 사용할 수 있다면이 훨씬 간단 할 것 명심하십시오 printhere DIV에 li의 텍스트를 추가 :

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> 

li을 첨부하려고 했으므로 printhere을 ul으로 변경했습니다.

스크립트 : 비교를 들어

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/

나는 이미

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

를 존재한다면 쉽게 확인할 수 있도록 목록에 대해 고유 한 ID를 사용했다 그리고 JS : u는 모두의

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

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

는 자바 스크립트입니다 :

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