내가 프로젝트하지만 내가 쓴 코드 일하고 다른 요소

Question

에 클래스 명으로 클릭 된 요소의 ID를 할당 정말 잘못된 것입니다 :

는

$('#lart').click(function(){ 
    $("#form3").addClass("lart"); 
}); 
$('#posht').click(function(){ 
    $("#form3").addClass("posht"); 
}); 
$('#majt').click(function(){ 
    $("#form3").addClass("majt"); 
}); 
$('#djatht').click(function(){ 
    $("#form3").addClass("djatht"); 
}); 

난 스위치 문으로 그것을 만드는 생각하지만 만드는 방법을 잘 모릅니다 사례의 변수. 위의 코드는 제대로 작동하지 않습니다. 왜냐하면 더 많은 옵션을 클릭하면 더 많은 클래스가 추가되고 더 많은 클래스를 추가하기를 원하지 않기 때문에, 그 중 하나 (lart, posht, djatht, majt)를 추가하기를 원하지 않기 때문입니다.

만약 내가 dhatht와 posht 및 majt를 사용하여 lart를 변경하는 것과 같은 두 쌍을 갖기를 원한다면, 이것은 id의 의미입니다. lart = up posht = down majt = left djatht = right so 위로 버튼을 클릭하면 오른쪽 클래스를 클릭하여 오른쪽 클래스를 추가하거나 왼쪽 클래스 하나를 더 추가 할 것입니다. 또는 아래쪽 버튼을 클릭하면 오른쪽 또는 왼쪽을 변경할 수 있지만 (아래 및 왼쪽/오른쪽 또는 위쪽 및 왼쪽/오른쪽)이 가능합니까?

Answer 1

switch 문이 필요하지 않습니다. 간단하게, 모든 요소를 ​​선택 이벤트 처리기를 바인딩하고 클래스와 ID를 사용

: 당신은 당신이 다른 클래스를 제거하지 않는 확인하려면

$('#lart, #posht, #majt, #djatht').click(function(){ 
    $("#form3").prop('class', this.id); 
}); 

---

, 이것을 사용

$('#lart, #posht, #majt, #djatht').click(function(){ 
    $("#form3").removeClass('lart posht majt djatht').addClass(this.id); 
}); 

---

업데이트 : 코멘트에 게시 된 문제에 솔루션 (쉬운 이해를 위해, 나는 길의 영어 단어를 사용하여 수 있습니다) :

var opposites = { 
     up:  'down', 
     down: 'up', 
     right: 'left', 
     left: 'right' 
    }; 

$('#up, #right, #down, #left').click(function() { 

    $("#form3").addClass(this.id).removeClass(opposites[this.id]); 
}); 

Answer 2

.prop('class', this.id); 

당신이 따옴표를 탈출,하지만 당신은 한 번에 하나 개의 클래스를 원하는 경우, 사용 한 이유는 확실하지 ... 대신 addClass.

Answer 3

업데이트 : 한 번에 하나의 클래스 만 추가합니다.

$("#lart,#posht,#majt,#djatht").click(function() { 
    $("#form3").attr('class',this.id); 
}); 

Answer 4

여기에 클래스 이름 대신 data- 속성을 사용하고 싶습니다.

$.each(['lart', 'posht', 'djatht', 'majt'], function (idx, id) { 
    $('#' + id).click(function() { 
    $('#form3').attr('data-selected', id) 
    }) 
}) 

이렇게하면 트리거 중 하나를 클릭 할 때마다 이전 값을 덮어 씁니다. 필요한 경우 CSS 선택기에서 속성을 사용할 수 있습니다.

#form3[data-selected="lart"] { 
    ... 
}