1
votes

Comment changer la police Awesome plus en moins en utilisant jQuery

J'ai une police plus Icône génial Je veux la changer en moins lorsque l'utilisateur clique sur plus et vice versa

Je l'utilise dans mon tableau HTML pour développer certaines lignes

p >

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>

.icon {
  color: green;
  cursor: pointer;
  margin-right: 6px;
}

$('i').click(function() {

  $(this).find('i').toggleClass('fas fa-plus fas fa-minus');
});

javascript jquery

1 commentaires

il s'agit de l'élément i sur lequel vous avez cliqué, vous n'avez donc pas besoin de la find

3 Réponses :

1
votes

Pas besoin d'utiliser find $ this represent i , et de basculer la classe multi-pal pour changer la classe et la forme comme ci-dessous.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>

.icon {
  color: green;
  cursor: pointer;
  margin-right: 6px;
}
.green{
color: green;
}
.red{
color: red;
}

$('i').click(function() {
  $(this).toggleClass('fa-plus green fa-minus red');
});

8 commentaires

hé j'ai essayé d'utiliser votre code mais cela ne fonctionne pas, pouvez-vous consulter ce lien jsfiddle.net/ draj8126 / 2h7vkgj4 / 1

J'ai commenté la ligne où je pense que cela pose problème, c'est au bas de mon code Java-Script

J'ai trouvé votre problème. Vous réinitialisez votre table après 1 seconde à l'aide de setTimeout. Augmentez le nombre pour résoudre le problème. Voir travail du violon. jsfiddle.net/7mdxhuf4

@hey qui ne fonctionne pas, car je règle la hauteur dynamique par ce var $ winHeight = $ (window) .height (); var $ bodyHeight = $ winHeight - 320; donc ici, en violon, la hauteur est inférieure à la hauteur de la table, rendez cette hauteur 500px et vérifiez que cela ne fonctionne pas

veuillez consulter jsbin.com/ceyazejade/edit?js,output J'utilise < code> isdrawtable pour résoudre mon problème de défilement qui se reproduit lorsque je règle le délai d'expiration supérieur à 100

Je ne comprends pas ce que tu veux dire?

regardez-le 100 et exécutez et en cliquant sur Bakery FG faites défiler depuis le côté gauche, il défilera bien, mais lorsque vous augmentez le setTimeout, il défile seul

Je pense que le problème est "scrollCollapse": vrai,. Cochez une fois pour commenter cette ligne.

2
votes

Vous y êtes presque, mais votre sélecteur est incorrect (vous pouvez simplement utiliser $ (this) à l'intérieur d'un gestionnaire d'événements pour référencer l'élément cliqué):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>

.icon {
  color: green;
  cursor: pointer;
  margin-right: 6px;
}

$('i').click(function() {
  $(this).toggleClass('fa-plus fa-minus');
  var color = ($(this).hasClass('fa-minus')) ? 'red' : 'green';
  $(this).css('color', color);
});

0 commentaires

0
votes

Vous devez supprimer find () et cela fonctionnera.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>

.icon {
  color: green;
  cursor: pointer;
  margin-right: 6px;
}

$('i').click(function() {

  $(this).toggleClass('fa-plus fa-minus');
  $(this).hasClass('fa-minus')? $(this).css('color','red'): $(this).css('color','green');
});

0 commentaires