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

实际上，你的小提琴的问题在于你指定了“No-Library（纯JS）”。您需要包含jQuery，并且您的脚本将按预期工作（在左侧栏中，在“Frameworks＆amp; Extensions”下，选择一个jQuery版本）。你的jQuery没什么问题。

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

您可以在此处看到它：http://jsfiddle.net/Jammerwoch/NFQpw/12/

Answer 3

试试这个。只包括JS：link

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

Answer 4

它正在运行，但您使用纯Javascript进行测试，而不是jQuery

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

它会起作用

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

4 个答案: