Il faut ajouter la classe "select1" sur l'événement click avec ces identifiants

Question

$('#select').click(function() {
  if ($('div').attr('id') == '1') {
    $('#1').addClass("select1");
  } else if ($('div').attr('id') == '2') {
    $('#2').addClass("select1");
  } else if ($('div').attr('id') == '3') {
    $('#3').addClass("select1");
  }
})

.select1 {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select">
  <div id="1">
    //some code
  </div>
  <div id="2">
    //some code
  </div>
  <div id="3">
    //some code
  </div>
</div>

Qu'est-ce qui ne va pas dans ce code ? J'ai besoin d'ajouter la classe "select1" sur l'événement click avec différents ids satisfaisant les conditions ci-dessus.

Answer 1

Vous pouvez le faire de la manière suivante :

$(document).ready(function(){

  $('#select > div').click(function(){
      $('#select > div').removeClass("select1"); //remove select1 from previously added div
      $(this).addClass("select1"); // add select1 to currently clicked div
    });
  });

.select1{
  background: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="select">
  <div id="1">
    //some code 1
  </div>
  <div id="2">
    //some code 2
  </div>
  <div id="3">
    //some code 3
  </div>
</div>

Answer 2

Boucle pour trouver la div enfant à l'intérieur de la div principale.

   $('#select').click(function(){
    $('div#select > div').each(function(){ 
              if ( $('div').attr('id') == '1' )  {
                $('#1').addClass("select1");
              }
              else if ( $('div').attr('id') == '2' )  {
                $('#2').addClass("select1");
              }
              else if ( $('div').attr('id') == '3' )  {
                $('#3').addClass("select1");
              }
             });
    });

Answer 3

Le problème de la mise en œuvre est que $('div').attr('id') il vous renverra toujours l'ID de la première div qu'il rencontre lors de la traversée du DOM, la valeur renvoyée est donc sélectionner . La condition d'absence est donc remplie.

Vous pouvez utiliser Événement.cible il renvoie une référence à l'objet qui a envoyé l'événement. then $() peut être utilisé pour construire un objet jQuery afin d'utiliser diverses méthodes jQuery.

$('#select').click(function(event) {
  //Remove previously added class
  $('#select > div.select1').removeClass("select1");

  //Add class to current element
  $(event.target).addClass("select1");
})

$('#select').click(function(event) {
  //Remove previously added class
  $('#select > div.select1').removeClass("select1");
  $(event.target).addClass("select1");
})

.select1 {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select">
  <div id="1">
    //some code
  </div>
  <div id="2">
    //some code
  </div>
  <div id="3">
    //some code
  </div>
</div>

Answer 4

Vous voulez ajouter une classe à la div qui a été cliquée. Pour cela, utilisez this comme indiqué ci-dessous :

if ( $(this).attr('id') == '1' )  {
$('#1')removeClass("select1")
$('#1').addClass("select1");
}

Answer 5

Utilisez each pour parcourir en boucle les divs comme :

$('#select').click(function(){
alert('jk');
$('div').each(function(){
alert('l');
if ( $(this).attr('id') == '1' )  {
            $(this).addClass("select1");
          }
})
})

violon d'Ingres :

https://jsfiddle.net/u9p0z41e/1/