Jquery使用特殊类搜索所有标签，如果其中一个标签具有值，则只显示一个警报

Jquery seach all tags with special class if one of them has the value show only one alert

本文关键字：标签 一个 显示 搜索 Jquery 如果      更新时间：2023-09-26

第一次访问我的小提琴

单击submit按钮时，如果文本input字段未更改，则会出现alert。并且文本input得到红色边框。

我想要的是，有多少input字段不变，这无关紧要，只会出现一个alert。

这是我的Jquery方法：

$(".submit").click(function (e) {
      $(".textInput").each(function () {
        if ($(this).val() === "input here") {
            e.preventDefault();
            $(this).css({
                border: "1px solid #f00",
                color: "#f00"
            });
            alert("Please input the texts in red box");
        } else {
            $(this).css({
                border: "1px solid #DCDCDC",
                color: "#000"
            });
        }
      });
});

我该怎么做？

感谢

您只需要在执行警报之前汇总您的答案：

$(".submit").click(function (e) {
    var doAlert = false; // don't alert, unless the condition sets this to 'true'
    $(".textInput").each(function () {
        if ($(this).val() === "input here") {
            e.preventDefault();
            $(this).css({
                border: "1px solid #f00",
                color: "#f00"
            });
            // instead of performing the alert inside the "loop"
            // set a flag to do it once the "loop" is complete.
            doAlert = true;
        } else {
            $(this).css({
                border: "1px solid #DCDCDC",
                color: "#000"
            });
        }
    });
    if(doAlert) { // do the alert just once, if any iteration set the flag
        alert("Please input the texts in red box");
    }
});

这样的Sth将有助于标记变量：

$(".submit").click(function (e) {
    e.preventDefault();
    var error = false;
    $(".textInput").each(function () {
        if ($(this).val() === "input here") {

            $(this).css({
                border: "1px solid #f00",
                color: "#f00"
            });
            error = true;
        } else {
            $(this).css({
                border: "1px solid #DCDCDC",
                color: "#000"
            });
        }        
    });
    if(error == true) alert("Please input the texts in red box");

})；

只需启动一个变量，例如Count

当您的条件（$（this）.val（）=="input here"）为真时，使其计数器为1 i-e计数+=1；

最后，如果（计数>0）{alert（"请在红框中输入文本"）；}

，则设置一个条件

虽然您已经接受了答案，但我建议使用一种更简单的方法：

$(".submit").click(function (e) {
    e.preventDefault();
    /* 1. gets the input elements,
       2. sets their border-color back to that specified,
       3. filters the collection, keeping only those elements without a value,
       4. sets the border-color of only those empty inputs to red,
       5. assigns the length property of the collection to the variable.
    */
    var empties = $('.textInput').css('border-color', '#ccc').filter(function () {
        return !this.value;
    }).css('border-color', 'red');
    // if the length is greater than zero, triggers the (single) alert:
    if (empties.length) {
        alert('please fill out the red-boxes');
    }
});

JS Fiddle演示。

相关文章：