2
votes

Rechercher tous les boutons sans texte et les remplacer par un nouveau texte

J'ai plusieurs boutons comme celui-ci:

$(document).ready(function() {
  if ($('.my-btn').text() == '') {
    $('.my-btn').text('0');
  }
});

Au chargement de la page, je dois trouver tous les boutons sans texte (numéro) et insérer 0 . J'ai essayé plusieurs versions de ceci, mais pas de chance:

<button class="my-btn" id="1"></button>
<button class="my-btn" id="2">100</button>
<button class="my-btn" id="3"></button>
<button class="my-btn" id="4">200</button>
<button class="my-btn" id="5"></button>

javascript jquery html

0 commentaires

3 Réponses :

0
votes

Vous aurez besoin de parcourir tous vos boutons, je le fais avec chaque boucle.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="my-btn" id="1"></button>
<button class="my-btn" id="2">100</button>
<button class="my-btn" id="3"></button>
<button class="my-btn" id="4">200</button>
<button class="my-btn" id="5"></button>

$(document).ready(function() {
$('.my-btn').each(function(){
    if ($(this).text() == '') {
        $(this).text('0');
    }
    });
});

3 commentaires

Merci pour les suggestions. Pour une raison quelconque, votre version ne fonctionne pas pour moi, mais je vais réessayer et vérifierai mon code. Merci encore pour votre temps!

hmm cela fonctionne si vous cliquez sur exécuter l'extrait de code. C'est peut-être ainsi que vous l'avez implémenté.

Je pense que j'ai peut-être un espace blanc là-dedans, alors peut-être que j'ajouterais le trim () . Merci de toute façon!

3
votes

Le problème avec votre logique actuelle est que vous obtenez actuellement le text () de tous les éléments .my-btn , d'où $ ('. my-btn '). text () renvoie 100200 et ne correspond pas au ' ' dans la condition.

Pour résoudre ce problème, vous devez boucle sur tous les éléments individuellement. Vous pouvez le faire avec une boucle implicite en fournissant une fonction à text () qui vérifie la valeur actuelle et renvoie la valeur mise à jour. Essayez ceci:

$('.my-btn').text((i, t) => t.trim() || '0');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="my-btn" id="1"></button>
<button class="my-btn" id="2">100</button>
<button class="my-btn" id="3"></button>
<button class="my-btn" id="4">200</button>
<button class="my-btn" id="5"></button>

Mise à jour - 03/2020 :

Voici une version plus courte utilisant ES6 qui fonctionnera dans tous les navigateurs modernes - essentiellement tout sauf IE.

$(document).ready(function() {
  $('.my-btn').text(function(i, t) {
    return t.trim() || '0';
  });
});

1 commentaires

Merci! C'est exactement ce dont j'avais besoin. Votre temps est très apprécié!

0
votes

Vous pouvez utiliser jQuery.each () pour vérifier tous les .

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="my-btn" id="1"></button>
<button class="my-btn" id="2">100</button>
<button class="my-btn" id="3"></button>
<button class="my-btn" id="4">200</button>
<button class="my-btn" id="5"></button>

$(document).ready(function() {
    const $myBtns = $('.my-btn');
    $myBtns.each((i,btn) => {
      if($(btn).text() === '') $(btn).text('0')
    })
});

0 commentaires