Question

我有这个HTML代码：

<div class="form-group">
    <select class="country form-control" required="required" name="fos_user_registration_form[country]" id="fos_user_registration_form_country">
        ....
    </select>
</div>

然后在我的jQuery代码中我有一个条件，如果它失败了，那么我将一些HTML附加到SELECT元素，如下所示：

$(".country").on('change', function() {
    country = $(this).find('option:selected').val();
    $.get(Routing.generate('states', {country_id: country})).success(function(data) {
        if (data.message === "") {
            $('.state').empty().append('<option value="-1">Choose state</option>');
            $.each(data.entities, function(i, d) {
                $('.state').append('<option value="' + d.id + '">' + d.name + '</option>');
            });
            $('.state').removeAttr('disabled');
        } else {
            $('.country').after('<span class="help-block">' + data.message + '</span>');
        }
    }).error(function(data, status, headers, config) {
        if (status == '500') {
            message = "No connection";
        }
    });
});

输出如下：

<div class="form-group">
    <select class="country form-control" required="required" name="fos_user_registration_form[country]" id="fos_user_registration_form_country">
        ....
    </select>
    <span class="help-block">Some text goes here</span>
</div>

但是每当我改变选择和条件失败时<span>重复一次，一次产生这个：

<div class="form-group">
    <select class="country form-control" required="required" name="fos_user_registration_form[country]" id="fos_user_registration_form_country">
        ....
    </select>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
</div>

什么时候应该只是一次，我需要做些什么才能解决这个问题？

另外我如何向<div class="form-group">添加一个类，因为这不是该类的唯一DIV并且应用于$('.form-group')将添加到页面上的所有DIV，任何建议？

Answer 1

首先，只选择这个特殊的＆＃34;形式组＆＃34;您需要在标记中添加其他类型的标识符。这可以是另一个类名，也可以是id，如下所示：

<div class="form-group" id="form-group-country">
    ...
</div>

然后你就可以在jQuery中轻松地挑出这个<div>：

// Store the form-group wrapper for the states <select>
var $formGroupCountry = $('#form-group-country');

要回答关于仅添加一次跨度的问题，您需要保留某种标志以了解错误已添加到DOM中。这应该有效：

var hasErrorBeenAdded = false;
$(".country").on('change', function() {
    country = $(this).find('option:selected').val();
    $.get(Routing.generate('states', {country_id: country})).success(function(data) {
        if (data.message === "") {
            $('.state').empty().append('<option value="-1">Choose state</option>');
            $.each(data.entities, function(i, d) {
                $('.state').append('<option value="' + d.id + '">' + d.name + '</option>');
            });
            $('.state').removeAttr('disabled');
        } else if($('.country .help-block').length==0 && !hasErrorBeenAdded) {
            $('.country').after('<span class="help-block">' + data.message + '</span>');
            hasErrorBeenAdded = true;
        }
    }).error(function(data, status, headers, config) {
        if (status == '500') {
            message = "No connection";
        }
    });
});

希望这有帮助。

Answer 2

您可以只使用一个标记来保持跟踪。像这样的东西

var flag = 0;//declare globally
if(... && flag == 0){
    //your scripts
    flag++;
}

Answer 3

如果已经存在，您应该先尝试删除范围

$(this).next('.help-block').remove()

要仅将类添加到当前父div，请使用parent

$(this).parent('.form-group').addClass('newClass');

如果验证失败但在每次都不重复时附加文本

3 个答案: