Javascript 使用replaceWith同时单击按钮而不刷新浏览器_Javascript_Jquery_Html

Javascript 使用replaceWith同时单击按钮而不刷新浏览器

javascript jquery html

Javascript 使用replaceWith同时单击按钮而不刷新浏览器,javascript,jquery,html,Javascript,Jquery,Html,我正试图弄明白，如何在不刷新浏览器的情况下同时单击按钮。我注意到，如果我单击其中一个按钮，它会工作，并使用.replaceWith替换它的新值，但当我单击另一个按钮时，它不会给我另一个值代码： <body> <input type = "button" id = "bt1" value = "See my Full Name :)"> <input type = "button" id = "bt2" value = "See my Nickname :)">

我正试图弄明白，如何在不刷新浏览器的情况下同时单击按钮。我注意到，如果我单击其中一个按钮，它会工作，并使用

.replaceWith

替换它的新值，但当我单击另一个按钮时，它不会给我另一个值

代码：

<body>
<input type = "button" id = "bt1" value = "See my Full Name :)">
<input type = "button" id = "bt2" value = "See my Nickname :)">

<div>
    <div class = "name">See my name</div>
</div>

<script>

    $(document).ready(function ()
    {
        $("#bt1").click
        (
            function ()
            {
                $("div.name").replaceWith("<div>John Francis</div>");
                alert("Your full name is John Francis");
            }
        );

        $("#bt2").click
        (
            function ()
            {
                $("div.name").replaceWith("<div>Francis</div>");
                alert("Your nickname is Francis");
            }
        );
    });

</script>


看到我的名字了吗
$（文档）.ready（函数（）
{
$（“#bt1”）。单击
(
函数（）
{
$（“部门名称”）。替换为（“约翰·弗朗西斯”）；
警惕（“你的全名是约翰·弗朗西斯”）；
}
);
$（“#bt2”）。单击
(
函数（）
{
$（“部门名称”）。替换为（“弗朗西斯”）；
警惕（“你的昵称是弗朗西斯”）；
}
);
});

您没有将classname

.name

添加到新插入的要替换的DIV中，因此下次单击时，类

.name

中没有任何元素

只更新文本会容易得多

$(document).ready(function() {
    $("#bt1").click(function() {
        $(".name").text("John Francis");
        alert("Your full name is John Francis");
    });

    $("#bt2").click(function() {
        $(".name").text("Francis");
        alert("Your nickname is Francis");
    });
});

如果出于某种原因您必须使用replaceWith（您不需要），只需添加类

$(document).ready(function() {
    $("#bt1").click(function() {
        $(".name").replaceWith("<div class='name'>John Francis</div>");
        alert("Your full name is John Francis");
    });

    $("#bt2").click(function() {
        $(".name").replaceWith("<div class='name'>Francis</div>");
        alert("Your nickname is Francis");
    });
});

$（文档）.ready（函数（）{
$（“#bt1”）。单击（函数（）{
$（“.name”）。替换为（“约翰·弗朗西斯”）；
警惕（“你的全名是约翰·弗朗西斯”）；
});
$（“#bt2”）。单击（函数（）{
$（“.name”）。替换为（“弗朗西斯”）；
警惕（“你的昵称是弗朗西斯”）；
});
});

$（文档）.ready（函数（）
{
$（“#bt1”）。单击
(
函数（）
{
$（'div.name'）.text（“”）
$（“约翰·弗朗西斯”）。附录（“部门名称”）；
警惕（“你的全名是约翰·弗朗西斯”）；
}
);
$（“#bt2”）。单击
(
函数（）
{  
$（“div.name div”）。替换为（“Francis”）；
警惕（“你的昵称是弗朗西斯”）；
}
);
});

为什么我应该使用

.text

而不是

.replaceWith

有没有办法使用

.replaceWith

？

$(document).ready(function ()
{
    $("#bt1").click
    (
        function ()
        {
            $('div.name').text("")
            $("<div>John Francis</div>").appendTo('div.name');
            alert("Your full name is John Francis");
        }
    );

    $("#bt2").click
    (
        function ()
        {  
            $("div.name div").replaceWith("<div>Francis</div>");
            alert("Your nickname is Francis");
        }
    );
});