Comment changer la couleur du texte en cliquant sur un bouton à l'aide de jquery ?

Slim Hmidi

J'essaie de changer la couleur du bouton lorsqu'on clique dessus. J'ai donc écrit ce programme.

$(document).ready(function() {
  var myprojects_button = document.getElementById("myprojects_button");
  $(myprojects_button).click(function() {
    $("myprojects_text").css("color: #cd1692");
  });
});
.myprojects_div {
  display: flex;
  flex-direction: column;
}

.myprojects_text {
  display: inline-block;
  font-size: 16px;
  font-family: "Arial Round MT Bold";
  color: #ffffff;
  line-height: 1.2;
  padding-top: 0px;
  margin-left: 10px;
  z-index: 2;
}

.fa.fa-list-alt {
  color: #ffffff;
}

.btn.btn-primary.btn-lg {
  background-color: #1b191a;
  border: #1b191a;
  height: 49px;
}

.btn.btn-primary.btn-lg:hover,
.btn.btn-primary.btn-lg:focus,
.btn.btn-primary.btn-lg:active {
  box-shadow: none;
  color: #8e8e8e;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myprojects_div" class="myprojects_div">
  <button id="myprojects_button" type="button" class="btn btn-primary btn-lg" data-target="#">
    <i class="fa fa-list-alt" aria-hidden="true"></i>
    <p class="myprojects_text">My projects<p>
  </button>
</div>

Mais quand j'ai cliqué sur le bouton, la couleur ne change pas. Comment puis-je réparer cela?

AlexVMM

L'utilisation correcte de .css() est décrite ici, changez simplement la partie javascript en ceci :

$(document).ready(function() {
     $("#myprojects_button").click(function() {
        $(".myprojects_text").css("color","#cd1692");
     });
   });

Articles connexes