jQuery 'if' ne fonctionne pas si on utilise $(this) mais fonctionne avec les ids

Question

J'ai un formulaire avec un grand nombre de cases à cocher et de zones de texte. Lorsqu'une case est cochée, la zone de texte associée apparaît. Tout cela fonctionne bien.

Cependant, j'ai un appel à une base de données qui reçoit des informations pour remplir les zones de texte avec des données si une certaine requête est faite. Un exemple du HTML est le suivant :

<li>
  <input type="checkbox" id="changes-trigger" />
  <label for="changes-trigger">Changes</label>
  <textarea id="changes" name="changes" rows="6" cols="40"><?php echo $report['changes']; ?></textarea>
</li>

Si des données sont chargées dans le champ de texte, je veux que la case à cocher soit cochée et que le champ de texte soit affiché. Si je cible spécifiquement la zone de texte à l'aide de l'attribut id je peux faire ce que je veux au moment du chargement de la page :

if($('#changes').val()) {
  $('#changes-trigger').prop('checked','true');
  $('#changes').show();
}

Cependant, comme je l'ai dit, j'en ai beaucoup et je ne veux pas coder pour chacun d'entre eux. Non seulement cela ne fait pas ce que je souhaite, mais cela casse le reste de mon fichier .js externe. Quelqu'un peut-il m'expliquer pourquoi la méthode suivante ne fonctionne pas ?

if($('textarea').val()) {
  $(this).siblings('input').prop('checked','true');
  $(this).show();
}

Answer 1

Je recommande d'utiliser each pour itérer à travers tous les textarea de cette manière :

$('textarea').each(function () {
    if($(this).val()) {
        $(this).siblings('input').prop('checked','true');
        $(this).show();
    }
});

Answer 2

$('textarea').val() fera référence à tous les éléments "textarea" de votre page, essayez -

$('textarea').each(function() {
    if($(this).val()) {
      $(this).siblings('input').prop('checked','true');
      $(this).show();
    }
})

Cela devrait permettre de parcourir toutes les zones de texte de la page et d'appliquer votre logique à chacune d'elles.

Answer 3

Vous attendez this de se référer maintenant à l'ensemble des zones de texte sur la page parce que vous les avez référencés dans votre if et il ne le fera pas - il ne changera pas à l'intérieur d'une fonction.

Vous pourriez faire

$('div#abc textarea').each(function() {
    if($(this).val()) {
        $(this).siblings('input[type=checkbox]').prop('checked','true');
        $(this).show();
    }
});

à la place. Je vous suggère de rechercher uniquement les zones de texte à l'intérieur d'un div donné ou similaire (ici avec l'id abc) et de ne mettre à jour que les entrées du bon type également !

Answer 4

El this le contexte pointe vers le window à moins qu'il n'ait été modifié par un rappel d'événement ou par l'utilisation de l'objet .call o .apply .

Au lieu de cela, utilisez ceci :

var $textarea = $('textarea');
if($textarea.val()) {
  $textarea.siblings('input').prop('checked','true');
  $textarea.show();
}

Answer 5

Utilisation de la TEXTAREA vous renverra un tableau de toutes les zones de texte de votre page. Application de .val() ne vous renverra que la valeur de la première zone de texte dans l'arbre DOM. A vérifier : http://jsfiddle.net/sc4vc/

Vous devez utiliser le .each() pour obtenir la valeur spécifique de chaque textarea

$('textarea').each(function() {
    if ($(this).val()) {
        $(this).siblings('input').prop('checked','true');
        $(this).show(); 
    }
}