2010-07-12 8 views
0

jQuery를 사용하여 DIV 태그의 ID를 가져 와서 DIV 에 CSS 스타일을 추가하십시오.
내가 jQuery를 새로운 오전,이 그것을 할 수있는 좋은 방법이 있는지 확실하지 않다 :DIV 태그의 ID를 잡고 그에 따라 DIV에 CSS 스타일을 추가하십시오.

자바 스크립트 :

$(".myClass").click(function(e){ 
    var whatid = $(this).attr('id'); 
    var whichDiv = "divName"+whatid; 
    ("$(\"#"+whichDiv+"\")").addClass(); 
    } 

HTML :

<div id="myTest1" class="myClass"> 
    Helloworld I am new to JQuery 1 
</div> 
<div id="myTest2" class="myClass"> 
    Helloworld I am new to JQuery 2 
</div> 

알려 주시기 바랍니다.

자바 스크립트 :

$(".myClass").click(function(e){ 
    var whatid = $(this).attr('id'); 
    var whichDiv = "divName"+whatid; 
    ("$(\"#"+whichDiv+"\")").addClass(); 
    } 

HTML :이 방법으로 코드를 변경하면 어떻게


<div id="1" class="myClass">CLick here 1</div> 
<div id="2" class="myClass">CLick here 2</div> 

<div id="myTest1"> 
    Helloworld I am new to JQuery 1 
</div> 
<div id="myTest2"> 
    Helloworld I am new to JQuery 2 
</div> 
+0

전체 코드입니까? ''divName ''은 어디에서 왔으며 왜 필요하다고 생각합니까? – Kobi

+0

@Kobi 죄송합니다. Jquery에 대해 자진 학습을하고 있었는데이 질문이 마음에 들었습니다. – user327712

답변

7

this 이미 대표는 DIV 사용자가 클릭. 이미 jQuery에 대한 참조가 있으므로 jQuery를 사용하여 다시 선택하지 않아도된다. ,

$(".myClass").click(function(e) { 
    // dont need to pull the id attribute 
    // dont need to select the element again by id 
    $(this).addClass('someClass'); 
}); 

을 그리고 당신은 idid 변수로 발생하여 일부 요소를 선택해야하는 경우의 말을하자 : 당신의 예를 들어

$(this).addClass('someClass'); 

을 :

는 단순히 그것에 클래스를 추가 이 구문은 유효하지 않습니다.

("$(\"#"+whichDiv+"\")").addClass(); 

여기 c 문자열을 reating하고 존재하지 않는 문자열에 addClass 메서드를 호출하려고합니다. 매개 변수없이 addClass을 호출해도 클래스 이름을 전달하여 여기에 요소를 추가해야하므로 쓸모가 없습니다.

$("#" + whatid).addClass('someClass'); 
+0

당신 덕분에 많은 Anurag. – user327712

+0

@kwokwai - 다행이었습니다. 건배! – Anurag

1

여기 완전한 예제 : 선택기 "divName"의 연결 플러스 클릭 한 요소의 ID가 그대로있는 경우

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Click Me</title> 
    <style> 
     .foo { 
      color:#F00; 
      font-size:40px; 
     } 
    </style> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 

     $(function() { 

      $('.myclass').click(function() { 
       alert('you clicked this: ' + this.id); 
       $(this).addClass('foo'); 
      }); 

     }); 

    </script> 
</head> 
<body> 
    <div id="mytest1" class="myclass"> 
     helloworld i am new to jquery 1 
    </div> 
    <div id="mytest2" class="myclass"> 
     helloworld i am new to jquery 2 
    </div> 
</body> 
</html> 
1

,이 시도 :

$(".myClass").click(function(e){ 
    $("#divName" + this.id).addClass('someClassName'); 
} 

업데이트 :

제공 한 HTML과 일치 시키려면 을 다음과 같이 실행하십시오. 숫자가 인 ID를 시작하는 것이 유효하지 않으므로 작동하지 않을 수 있습니다.

$(".myClass").click(function(e){ 
    $("#myTest" + this.id).addClass('someClassName'); 
} 

대신 문자로 시작하여 ID를 유효하게 만들고 변경된 요소 ID를 조정하여 ID와 일치하도록해야합니다.

+0

당신 말이 맞아요. 고맙습니다, 패트릭. – user327712

관련 문제