Javascript 如果验证失败，则追加文本，但不是每次都重复

我有以下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代码中，我有一个条件，如果失败，那么我将向SELECT元素添加一些HTML，如下所示：

$(".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";
        }
    });
});

$（“.country”）.on（'change'，function（）{
country=$（this.find（'option:selected'）.val（）；
$.get（Routing.generate（'states'，{country\u id:country}））.success（函数（数据）{
如果（data.message==“”）{
$（'.state'）.empty（）.append（'Choose state'）；
$.each（数据、实体、函数（i、d）{
$（'.state'）.append（''+d.name+''）；
});
$（'.state'）.removeAttr（'disabled'）；
}否则{
$（'.country'）。在（''+data.message+''）之后；
}
}).error（函数（数据、状态、标题、配置）{
如果（状态='500'）{
message=“无连接”；
}
});
});

此输出如下所示：

<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>

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

....
这里有一些文字

但是，每当我更改“选择”和“条件”失败时，

都会重复一次并产生以下结果：

<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，并且应用到

$（'.form group'）

将添加到页面上的所有DIV中，有什么建议吗？

您可以简单地使用一个标记来跟踪。像这样的

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

---

您可以简单地使用一个标记来跟踪。像这样的

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

---

如果已经存在跨距，则应首先尝试删除跨距

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

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

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

---

如果已经存在跨距，则应首先尝试删除跨距

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

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

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

---

首先，要仅选择这个特定的“表单组”，您需要向标记中添加另一种类型的标识符。这可以是另一个类名，也可以是一个id，如下所示：

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

...

这样，您就可以在jQuery中轻松地挑出以下内容：

<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>

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

//存储状态的表单组包装器
变量$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";
        }
    });
});

var hasErrorBeenAdded=false；
$（“.country”）.on（'change'，function（）{
country=$（this.find（'option:selected'）.val（）；
$.get（Routing.generate（'states'，{country\u id:country}））.success（函数（数据）{
如果（data.message==“”）{
$（'.state'）.empty（）.append（'Choose state'）；
$.each（数据、实体、函数（i、d）{
$（'.state'）.append（''+d.name+''）；
});
$（'.state'）.removeAttr（'disabled'）；
}else if（$（'.country.help block'）。长度==0&&！hasErrorBeenAdded）{
$（'.country'）。在（''+data.message+''）之后；
hasErrorBeenAdded=真；
}
}).error（函数（数据、状态、标题、配置）{
如果（状态='500'）{
message=“无连接”；
}
});
});

---

希望这有帮助。

首先，要仅选择此特定的“表单组”，您需要向标记中添加另一种类型的标识符。这可以是另一个类名，也可以是一个id，如下所示：

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

...

这样，您就可以在jQuery中轻松地挑出以下内容：

<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>

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

//存储状态的表单组包装器
变量$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";
        }
    });
});

var hasErrorBeenAdded=false；
$（“.country”）.on（'change'，function（）{
country=$（this.find（'option:selected'）.val（）；
$.get（Routing.generate（'states'，{country\u id:country}））.success（函数（数据）{
如果（data.message==“”）{
$（'.state'）.empty（）.append（'Choose state'）；
$.each（数据、实体、函数（i、d）{
$（'.state'）.append（''+d.name+''）；
});
$（'.state'）.removeAttr（'disabled'）；
}else if（$（'.country.help block'）。长度==0&&！hasErrorBeenAdded）{
$（'.country'）。在（''+data.message+''）之后；
hasErrorBeenAdded=真；
}
}).error（函数（数据、状态、标题、配置）{
如果（状态='500'）{
message=“无连接”；
}
});
});

---

希望这能有所帮助。

第一种方法有效，但将

$（this）

更改为

$（“.country”）

不知道为什么不使用

此方法，但第二种方法，用于添加类的方法无效，对此有任何其他想法吗？我从
.parent（）
更改为
.closest（）
，并且它可以按照我的意愿工作，感谢第一种方法有效，但将
$（this）
更改为
$（“.country”）
我不知道为什么不使用
这个
，但是第二种方法，用于添加类的方法不起作用，在这方面还有其他想法吗？我将
.parent（）
更改为
.closest（）
，并且它可以按照我的意愿工作，谢谢为什么我应该为每个
添加
id
。
？这不是我的想法，如果我有10个或更多呢？将疯狂地为每个人编写代码，我想知道为什么我应该为每个人添加一个
id
。
？这不是我的想法，如果我有10个或更多呢？会疯狂的为每一个写代码，我很强硬