3 votes

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

$('#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.

0voto

Ganesh Putta Points 2196

Juste pour votre référence, j'ai ajouté la couleur de fond à cette classe et vous pouvez faire plus de personnalisation selon vos besoins.

$('#select div').click(function(e) {
  $('#select div').removeClass("select1");
  $(e.target).parent().addClass("select1");
})

.select1{
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select">
            <div id ="1">
             <a>First Div</a>
            </div>
              <div id ="2">
               <a>Second Div</a>
            </div>
              <div id ="3">
                <a>Third Div</a>
          </div>
    </div>

0voto

Advaith Points 1015
//function to remove the previous ones
function remove() {
  $('#first a').removeClass("select1");
  $('#second a').removeClass("select1");
  $('#third a').removeClass("select1");
}

//function to add class
$('#select').click(function(e) {
  remove();
  $(e.target).addClass("select1");
})

.select1{
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select">
            <div id ="first">
             <a>First Div</a>
            </div>
              <div id ="second">
               <a>Second Div</a>
            </div>
              <div id ="third">
                <a>Third Div</a>
          </div>
    </div>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X