web-dev-qa-db-fra.com

jquery changer le style d'une div au clic

J'ai une div, avec un style spécifique (disons un certain fond).

Ce que je veux, c’est que, lorsque l’on clique sur un élément de la liste où cette div applique un autre style spécifique (un autre type d’arrière-plan) à appliquer à cette div,

Si vous cliquez sur une autre zone d'un élément différent appartenant à cette div, le style ne doit pas changer.

Est-il possible d'utiliser jQuery? Je vous remercie!

Edit: (ma fonction fait également d’autres choses. Mais la couleur changeante ne fonctionne pas comme je le veux. Elle change le fond de tous les éléments sur lesquels je clique, pas seulement le dernier clic.)

$(document).ready(function() {
    $('.product_types > li').click(function() {
        $(this)
        .css('backgroundColor','#EE178C')
        .siblings()
        .css('backgroundColor','#ffffff');

        $('#submit_button').removeAttr('disabled');
        $('#number').removeAttr('disabled');
    });
});
jquerycss
20
dana

Si j'ai bien compris votre question, voici ce que vous voulez.

Voici un jsFiddle du ci-dessous:

$('.childDiv').click(function() {
  $(this).parent().find('.childDiv').css('background-color', '#ffffff');
  $(this).css('background-color', '#ff0000');
});
.parentDiv {
  border: 1px solid black;
  padding: 10px;
  width: 80px;
  margin: 5px;
  display: relative;
}
.childDiv {
  border: 1px solid blue;
  height: 50px;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="divParent1" class="parentDiv">
  Group 1
  <div id="child1" class="childDiv">
    Child 1
  </div>
  <div id="child2" class="childDiv">
    Child 2
  </div>
</div>
<div id="divParent2" class="parentDiv">
  Group 2
  <div id="child1" class="childDiv">
    Child 1
  </div>
  <div id="child2" class="childDiv">
    Child 2
  </div>
</div>

31
Carls Jr.

vous pouvez utiliser la méthode .css de jquery ..

référence méthode css

4
Vivek
$(document).ready(function() {
  $('#div_one').bind('click', function() {
    $('#div_two').addClass('large');
  });
});

Si j'ai compris votre question.

Ou vous pouvez modifier le css directement:

var $speech = $('div.speech');
var currentSize = $speech.css('fontSize');
$speech.css('fontSize', '10px');
0
demas

Si je comprends bien, vous souhaitez modifier le style CSS d'un élément en cliquant sur un élément de la liste ul. Ai-je raison?

HTML:

<div class="results" style="background-color:Red;">
</div>

 <ul class="colors-list">
     <li>Red</li>
     <li>Blue</li>
     <li>#ffee99</li>
 </ul>

jquery

$('.colors-list li').click(function(e){
    var color = $(this).text();
    $('.results').css('background-color',color);
});

Notez que jquery peut utiliser addClass, removeClass et toggleClass si vous souhaitez utiliser des classes plutôt que des styles en ligne. Cela signifie que vous pouvez faire quelque chose comme ça:

$('.results').addClass('selected');

Et définir le style "sélectionné" dans le CSS.

Exemple de travail: http://jsfiddle.net/uuJmP/

0
Guy