Question

我正在试图弄清楚如何在不刷新浏览器的情况下同时点击我的按钮。我注意到，如果我点击其中一个按钮它正在工作并使用.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>

Answer 1

您没有将类名.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");
    });
});

FIDDLE

如果由于某种原因你必须使用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");
    });
});

FIDDLE

Answer 2

$(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");
        }
    );
});

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

2 个答案: