javascript - 我在尝试让我的脚本更改元素时遇到了一些麻烦

Question

我在 Drupal 站点上构建了一个小表单，代码如下：

<form id="form">
    <button class="btn calc" id="calculator" onclick="return false">Submit</button>
    <div class="calcAnswer">£ <span id="result">no value</span></div>
</form>

单击按钮后，我想使用 JavaScript 自动将 #result 元素替换为一个值。

我正在尝试这段代码（但似乎无法让它工作：

jQuery(document).ready(function ($){
    $("#calculator").click(function () {
        $("#result").replaceWith('<span id="result">A new value</span>');
    });
});

我一直在 JSFiddle ( http://jsfiddle.net/NFQpw/8/ ) 中进行测试，但无处可去。

Answer 1

您只需要在#result跨度内设置 html。使用.html()功能。

jQuery(document).ready(function ($){
    $("#calculator").click(function () {
        $("#result").html('A new value');
    });
});

http://jsfiddle.net/Stijntjhe/NFQpw/10/

Answer 2

实际上，您的小提琴的问题在于您指定了“无库（纯 JS）”。您需要包含 jQuery，并且您的脚本将按预期工作（在左侧栏的“框架和扩展”下，选择 jQuery 的版本）。您的 jQuery 没有任何问题。

也就是说，我同意@Stijn Martens，使用.html('A new value')更清洁；在这种情况下没有理由使用.replaceWith。

你可以看到它在这里工作：http: //jsfiddle.net/Jammerwoch/NFQpw/12/

Answer 3

试试这个。只包括JS：链接

jQuery(document).ready(function ($){
    $("#calculator").click(function () {
        $("#result").replaceWith('<span id="result">A new value</span>');
    });
});

Answer 4

它正在工作，但是您正在使用 pure 进行测试Javascript，而不是jQuery

在Frameworks & Extensions左侧菜单中设置选项jQuery 1.10.1

它会起作用