Question

我正在尝试动态添加和删除span元素。它抛出了像

这样的语法错误

预期'）'和预期';'

请帮我解决。

<script type="text/javascript">
    $(document).ready(function () {
        $("input[data-required='true']").focus(function () {
            $(this).css({ 'background-color': 'red' }).after("<span class="label_error;"style="color:red;font-size:10pt">This field is required</span>");
        });

    $("input[data-required='true']").blur(function () {
        $(this).css({ 'background-color': 'white' }).remove("<span class="label_error;"style="color:red;font-size:10pt">This field is required</span>") ;
    });

    });
</script>

Answer 1

您在HTML字符串中连接值的方式是错误的，

who am i

要解决此问题，您可以在双引号括起的字符串中使用.after("<span class='label_error' style='color:red;font-size:10pt;'>" + "This field is required" + "</span>");，或尝试使用single quote \等"avi\"s code is wrong"来转义双引号。

最重要的是，最好的方法是使用jquery创建元素，

.after($("<span>", {class : 'label_error', 
                    style : 'color:red;font-size:10pt;',
                    text : 'This field is required'
                   }));

这将更具可读性和可维护性。我忘了发现你在代码中犯的另一个错误。您以错误的方式使用.remove()，

$("input[data-required='true']").blur(function () {
   $(this).css({ 'background-color': 'white' }).next("span.label_error").remove();
});

您必须从$(this)对象中选择相关元素并调用remove over it。

完成任务的最佳方法是，通过使用相关选择器编写规则来分配样式工作（由@rory表示）

input[data-required='true'] {
  background-color: white;
}
input[data-required='true']:focus {
  background-color: red;
}
span.label_error {
  color: red;
  font-size: 10pt;
}

js就是，

var errorMsg = $("<span>", {class: 'label_error',text: 'This field is required'});

$("input[data-required='true']").focus(function() {
  $(this).after(errorMsg);
}).blur(function() {
  $(this).next("span.label_error").remove();
});

DEMO

Answer 2

你有两个问题。首先，您需要使用不同的引号将字符串分隔为您在字符串中使用的字符串。有用的是，在JS中，您可以使用单引号（'）或双引号（"）来实现相同的目的。此外，class属性不应包含尾随;。使用具有语法高亮的文本编辑器会很有帮助，因为它几乎不可能错过这样的错误。

你的第二个问题是remove()方法需要一个选择器，而不是整个HTML字符串。要删除span事件中附加的focus，请使用next()将其选中，然后remove()。试试这个：

$("input[data-required='true']").focus(function () {
    $(this).css({ 'background-color': 'red' }).after('<span class="label_error" style="color: red; font-size: 10pt">This field is required</span>');
});

$("input[data-required='true']").blur(function () {
    $(this).css({ 'background-color': 'white' }).next('span').remove();
});

最后，请注意，在CSS中定义样式是很多更好的做法，因为它将HTML / JS与样式规则分开，并有助于缩短JS。试试这个：

input[data-required='true'] {
    background-color: white; /* transparent may work here too */
}
input[data-required='true']:focus {
    background-color: red;
}
span.label_error {
    color: red;
    font-size: 10pt;
}

$("input[data-required='true']").focus(function () {
    $(this).after('<span class="label_error">This field is required</span>');
}).blur(function () {
    $(this).next('span').remove();
});

Working example

Jquery动态添加和删除元素

2 个答案:

DEMO