2010-07-12 9 views
0

J'utilise jQuery pour saisir l'ID d'une balise DIV et ensuite ajouter un style CSS à la DIV en conséquence.
Je suis nouveau à jQuery, et je ne sais pas si cela est une bonne façon de le faire:Saisissez l'ID d'une balise DIV puis ajoutez un style CSS à la DIV en conséquence

JavaScript:

$(".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> 

S'il vous plaît conseiller.


si je changé le code de cette façon:

JavaScript:

$(".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

Est-ce tout le code? D'où vient "' divName "' et pourquoi pensez-vous en avoir besoin? – Kobi

+0

@Kobi Désolé, je faisais de l'auto-apprentissage sur JQUery et cette question m'est venue à l'esprit. – user327712

Répondre

7

this représente déjà la div l'utilisateur a cliqué sur. Vous n'avez pas besoin de le resélectionner en utilisant jQuery puisque vous avez déjà une référence à celui-ci.

simplement, ajoutez la classe à elle:

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

Pour votre exemple:

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

Et disons que si vous avez besoin de sélectionner un élément par id et id se trouve être une variable, alors cette syntaxe n'est pas valide:

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

Ici, vous êtes c en traçant une chaîne, puis en essayant d'appeler la méthode addClass sur une chaîne, qui n'existe pas. Aussi appeler addClass sans aucun paramètre est inutile, puisque vous voulez passer dans le nom de la classe à ajouter à l'élément ici.

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

Un grand merci à vous, Anurag. – user327712

+0

@kwokwai - Heureux que cela ait été utile. À votre santé! – Anurag

1

Voici l'exemple complet:

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

Si le sélecteur est littéralement une concaténation de "divName" ainsi que l'ID de l'élément que vous cliquez dessus, essayez ceci:

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

MISE À JOUR:

Pour faire correspondre le code HTML fourni, procédez comme suit, , mais sachez que cela risque de ne pas fonctionner car il est impossible de démarrer un ID avec un numéro.

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

Au lieu de cela, vous devez faire vos pièces d'identité valides en les commençant par une lettre, et réglez l'ID d'élément couplé pour correspondre au changement.

+0

Vous avez raison. Merci, Patrick. – user327712