Maison > Article > interface Web > Comment résoudre le problème de sélection de jquery qui ne change pas

Comment résoudre le problème de sélection de jquery qui ne change pas

PHPzoriginal: 2023-04-17 11:28:46903parcourir

Lors du développement de sites Web, nous utilisons souvent jQuery pour manipuler des éléments DOM. Une opération courante consiste à sélectionner des éléments et à modifier leurs propriétés ou leur contenu. Dans jQuery, vous pouvez utiliser des sélecteurs pour sélectionner les éléments qui doivent être exploités. Cependant, nous constatons parfois que même si des éléments ont été sélectionnés via le sélecteur, la modification de leurs attributs ou de leur contenu ne prend pas effet. Alors, comment résoudre cette situation ?

Démonstration de cas

Examinons un cas simple pour mieux comprendre le problème. Ci-dessous se trouve un fichier HTML contenant quelques paragraphes et boutons :

<!DOCTYPE html>
<html>
<head>
    <title>jQuery selected没有改变</title>
</head>
<body>
    <p id="para1">Hello World!</p>
    <p class="para2">jQuery is awesome!</p>
    <button id="btn1">改变段落内容</button>
    <button id="btn2">改变按钮文本</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#para1").text("Paragraph 1内容已改变！"); //改变段落1的内容
            });

            $("#btn2").click(function(){
                $(".para2").text("Paragraph 2内容已改变！"); //改变所有class为para2的段落的内容
            });
        });
    </script>
</body>
</html>

Comme vous pouvez le voir, dans ce cas, nous avons utilisé jQuery pour sélectionner deux éléments. L'un est le paragraphe avec l'ID "para1", et l'autre est tous les paragraphes avec la classe "para2". Nous essayons d'utiliser jQuery pour modifier le contenu des boutons lorsque l'on clique dessus.

Impossible de modifier le contenu

Cependant, lorsque nous exécutons l'exemple et essayons de modifier le contenu du paragraphe avec la nouvelle valeur, nous constatons qu'il n'y a aucun changement.

Voici quelques raisons possibles :

Il y a une faute de frappe dans le code qui empêche le code de s'exécuter comme prévu.
Le sélecteur ne sélectionne pas l'élément réel.
Le code tente de modifier une propriété ou une valeur de propriété qui ne peut pas être modifiée.

Si ce problème survient, nous pouvons utiliser les outils de développement du navigateur pour vérifier la cause du problème.

Code de débogage

Dans cet exemple, ouvrez les outils de développement de votre navigateur (appuyez sur F12) et sélectionnez l'onglet "Éléments" dans le code HTML. Dans cet onglet, vous pouvez visualiser les valeurs des éléments DOM ainsi que les propriétés CSS.

Nous verrons que la valeur du premier paragraphe n'a pas été modifiée correctement, mais est toujours "Hello World!", et que le contenu du deuxième paragraphe n'a pas été modifié en "Le contenu du paragraphe 2 a changé!". Cela signifie que nous devons vérifier les sélecteurs et le code.

Vérification du sélecteur

Tout d'abord, vérifiez que le sélecteur sélectionne le bon élément. Dans cet exemple, nous utilisons deux sélecteurs : un sélecteur d'ID et un sélecteur de classe. Utilisez le symbole # dans le sélecteur pour représenter le sélecteur d'ID et utilisez le symbole .

Par exemple, le sélecteur "#para1" sélectionnera l'élément avec l'identifiant "para1" ; le sélecteur ".para2" sélectionnera tous les éléments de classe "para2".

Assurez-vous qu'il n'y a pas d'erreurs dans le sélecteur.

Vérifiez le code

Ensuite, vérifiez que le code est correct. Dans cet exemple, nous essayons de modifier le contenu du paragraphe dans le gestionnaire de l'événement clic sur le bouton. Nous utilisons la méthode .text() de jQuery pour modifier le contenu du paragraphe.

Par exemple, $("#para1").text("Le contenu du paragraphe 1 a changé!"); sélectionnera le paragraphe avec l'ID d'élément "para1" et changera son texte en "Le contenu du paragraphe 1 a changé!".

Assurez-vous que le code appelle les méthodes et propriétés correctes et qu'il ne contient aucune erreur de syntaxe.

Résolution de problèmes

En inspectant les sélecteurs et le code, nous pouvons découvrir la cause et résoudre le problème.

Dans cet exemple, lorsque nous avons inspecté le code, nous avons constaté que l'opération de modification n'avait pas été effectuée correctement. La raison est que nous n'avons pas fait le bon appel lors de la modification de l'opération. Nous devons utiliser le code suivant :

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#para1").text("Paragraph 1内容已更改！");
    });
 
    $("#btn2").click(function(){
        $(".para2").text("Paragraph 2内容已更改！");
    });
});

Après avoir correctement exécuté le code ci-dessus, nous rechargeons la page Web. Maintenant, nous constatons que cela fonctionne bien et que le contenu du paragraphe est modifié avec succès.

Résumé

Cet article présente brièvement les problèmes qui peuvent survenir lors de la sélection d'éléments et de la modification de leurs attributs ou de leur contenu dans jQuery. Lorsqu'un problème survient, nous devons utiliser les outils de développement du navigateur pour vérifier le code et les sélecteurs afin de localiser la cause du problème. Ce n'est qu'en vérifiant et en modifiant le code que le problème pourra être définitivement résolu et que le fonctionnement normal de la page Web pourra être assuré.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Parlons de la façon de masquer les paramètres de routage de VueArticle suivant：Parlons de la façon de masquer les paramètres de routage de Vue

Articles Liés

Voir plus