11540 sujets

JavaScript, DOM et API Web HTML5

Changer la couleur d'un bouton en jquery

bonjour!

je souhaite faire un tableau comportant un bouton par ligne et lorsque on clique sur un bouton cela change la couleur du bouton du dessus... sauf que cela ne marche pas..
j'utilise Bootstrap et jQuery.
je souhaite que lorsque on clique cela ajoute la classe "selected" sur le bouton et ajouter une classe"btn-danger" le bouton d'au dessus via la fonction prev() et addClass sauf que rien ne se passe Smiley bawling

A toute fin utile je met mon code :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="jumbotron">
            <h1 class="centred">projet test</h1>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <table class="table table-striped">
            <caption>exemple de taleau</caption>
            <thead>
              <tr>
                <th>nom</th>
                <th>prenom</th>
                <th>instrument</th>
                <th>bouton</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>john</td>
                <td>doe</td>
                <td>guitare</td>
                <td><button class="btn btn-default" type="submit">Button</button></td>
              </tr>
                <tr>
                <td>hammet</td>
                <td>kirk</td>
                <td>guitare</td>
                <td><button class="btn btn-default" type="submit">Button</button></td>
              </tr>
                <tr>
                <td>hetfield</td>
                <td>james</td>
                <td>guitare</td>
                <td><button class="btn btn-default" type="submit">Button</button></td>
              </tr>
                <tr>
                <td>trurillo</td>
                <td>rob</td>
                <td>basse</td>
                <td><button class="btn btn-default" type="submit">Button</button></td>
              </tr>
                <tr>
                <td>ulrich</td>
                <td>lars</td>
                <td>batterie</td>
                <td><button class="btn btn-default" type="submit">Button</button></td>
              </tr>
            </tbody>
            
          </table>
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script>
    $("button").click (function(){
      $(this).addClass("selected");
      $("button").prev( ".selected" ).addClass("btn-danger").removeClass("btn-default");

    });
    </script>
  </body>
</html>


la classe selected est bien ajoutée mais pas le reste et je ne comprend pas pourquoi, pourriez vous m'aider?
Merci d'avance Smiley biggrin
Modifié par neirda86 (03 Mar 2015 - 18:15)
Salut

Avec jquery tu peux directemetn écrire ceci

$(this).addClass("selected").prev( ".selected" ).addClass("btn-danger").removeClass("btn-default");


sinon ton erreur vient du ciblage Smiley smile

tu commence avec $this c'est bien mais ensuite tu reviens sur button :s
salut pchlj et merci de ta reponse!

j'ai donc changé mon code par ;

   $("button").click (function(){
      
      $(this).addClass("selected").prev( ".selected" ).addClass("btn-danger").removeClass("btn-default");

    });


sauf que cela ne change rien les classes "btn-danger" et " btn-default" ne sont pas prise en compte, je ne vois pas non plus mon erreur de ciblage .. pourrais tu détailler ?

merci beaucoup!
Modifié par neirda86 (03 Mar 2015 - 19:17)
Hello, tu ne peux pas naviguer de façon transversal le DOM.
 $(this).addClass("selected").parents("tr").prev().find("button").addClass("btn-danger").removeClass("btn-default");

.parents("tr") : remonte jusqu'au TR de ta table depuis le bouton cliqué.
.prev() : sélection du TR précédent.
.find("button") : redescend jusqu'au bouton
Sujet clos
Aller à