javascript - 注入(inject)JS的特殊HTML字符

Question

我有一个按钮(名为本杰明):

<input type="submit" name="btn_submit" value="Next &rarr;" />

在点击事件中，它会显示“正在加载”并执行一些很酷的操作。但是，如果出现问题，我希望它在其他地方显示错误消息的同时改回原来的文本。

$('input[name=btn_submit]').click(function() {
    $(this).val('Loading');

    // Logicy Stuff...

    // Error?
    $(this).val('Next →');

    return false;
});

不知何故，文字文本 → 应用于按钮，而不是酷炫的 →。我该如何解决这个问题？

Answer 1

HTML 的评估规则与 JavaScript 不同。仅由 html 解析器解析的 html 实体。要么使用 unicode 文字，如下所示:

$(this).val('Next \u2192');

或者更好的是，跟踪原始值然后将其设置回去:

var initalButtonValue = $(this).val();
$(this).val('Loading');

// Stuff

$(this).val(initialButtonValue);

或者甚至更好，使用 HTML 数据属性来存储状态。

<input type="submit" name="btn_submit" value="Next &rarr;" data-normal-value='Next &rarr;' data-loading-value='Loading...' />

然后:

// Set to loading
$(this).val($(this).data("loading-value"));

// and back to normal
$(this).val($(this).data("normal-value"));