이미지에서 jquery의 문자열을 추가 및 제거합니다.

Question

첫 번째 클릭시 문자열에 항목을 추가하고 동일한 이미지의 두 번째 클릭에서 항목을 제거해야하는 경우가 있습니다. 나는 웹 사이트에 3 개 이미지를 개는 다음 선택 = 고양이, 개 을 누를 경우 고양이가 선택 = 고양이 을 누를 경우 각각 선택 라는 다음과 같은 이름의 고양이, 개, 토끼와 JQuery와 문자열을 가진 예를 에 대한 지금 고양이를 다시 누르면 (누르지 않은 경우) 선택 = 개 토끼를 누르는 경우 선택 = 개, 토끼 등등 어떻게 할 수 있습니까? 당신은 각 옵션에 대한 FIELDSET와 전설을 가질 수 있습니다 도움

Answer 1

나를 예를 들어 당신에게

고양이, 개, 토끼가 자신의 ID를 가지고 줄 수 있습니다. 특정 항목을 클릭하면 이 id를 배열에 추가합니다. 다른 항목을 위해 할 수있는

var itemArr=[]; 
 
function AddMe(id){ 
 

 

 
//on item click check : 
 
var index= itemArr.indexOf(id); 
 
//array contains id 
 
if(index<=-1){ 
 
//on item click 
 
itemArr.push(id); 
 
}else{ 
 
itemArr.splice(index,1); 
 

 
} 
 

 
$("#result").html(itemArr.join(",")); 
 
}

.red{ 
 
color:red; 
 
font-weight:bold; 
 
} 
 

 
.brown{ 
 
color:brown; 
 
font-weight:bold; 
 
} 
 
.black{ 
 
color:black; 
 
font-weight:bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label id="cat" class="red" onclick="AddMe(id)">Cat </label> 
 
<label id="dog" class="brown" onclick="AddMe(id)">Dog </label> 
 
<label id="rabbit" class="black" onclick="AddMe(id)">Rabbit </label> 
 
<br/> 
 
<label>Array Item :</label> 
 
<label id="result"></label>

같은 방법으로.

Answer 2

및 변경에 대한 이벤트 리스너에 대한

감사합니다. 해고되면 옵션을 반복하고 선택한 옵션으로 문자열 배열을 채울 수 있습니다. 그런 다음 단순히 배열을 반복하거나 변수 접두어에 쉼표로 구분 된 내용을 추가하십시오.

해결 방법을 시도해 본 경우이 답변을 편집하면 문제가 해결됩니다.