Question

我正在玩一些基本的Jquery并且发生了一些奇怪的事情。我在页面上有两个元素..一个h1标题和一个通用链接。当我点击链接时，我希望文本更改为“此文本现在已更改”，并且确实如此，但随后按钮消失并创建新的h1，并使用相同的“此文本未更改”文本，或者按钮本身变成了h1。我不确定，但这是我的代码：

HTML：

<html>
    <head>
        <title></title>

        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
        <script src="js/main.js"></script>
    </head>

    <body>

        <h1>This element should change.<h1>


        <a href="#" class="myLink">Click Me</a><br>


    </body>
</html>

JQUERY：

$(document).ready(function() {

     $(".myLink").click(function() {  // this is a convenience method that targets the same elements above just in a quicker fashion.
            $("h1").html("This text has now changed.");
     });

});

图片点击之前：

图片之后：

此外，当我添加淡出方法时，所有内容都会再次消失，而不仅仅是目标“h1”元素。

任何建议都会一如既往地受到高度赞赏。谢谢。

Answer 1

您有两个开放的<h1>标记（第二个标记缺少/。）

<h1>This element should change.<h1>
                                ^here

Answer 2

看起来你有两个 start 标签。 EG：

<h1>Heading 1<h1>

尝试将第二个标记更改为结束标记。 EG：

<h1>Heading 1</h1>
              ^

Answer 3

您的h1标签未关闭。您有2个开始标记，默认情况下，您的链接包含在第二个开始标记中，因此它正在更改该html

Click上的所有元素都会更改，而不仅仅是目标

3 个答案: