jQuery - 添加/删除一个输入字段的类，而不是所有输入字段都使用 $（this）

jquery - add/remove class of just one input field, not all of them using $(this)

提问人：jasonc310771 提问时间：8/13/2023 最后编辑：jasonc310771 更新时间：8/13/2023 访问量：24

问：

所以现在我让它更改 BG 颜色，但在具有该类名的每个字段上。

如何正确地将类添加到仅通过onchange单击检查的类中，而不是所有具有相同名称的类？

试图发布这个，页面要求更多细节，但我不知道除了这篇文章顶部的前两行之外，我还能添加什么来解释我所追求的！所以我在这里解释一下，这整个段落只是为了用其他东西填充帖子以使其发布！

<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script><?php // this line nust be first before the jquery-ui.js ?>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>


<style>
.eventGroup { float: left; padding: 0 3em 3em 0; }
.eventGroup .n, .eventGroup .p { width: 20em; }
.eventGroup .s, .eventGroup .e { float: left; width: 10em; }
.addMore { padding-right: 1.5em; }
.formError { background-color: #FF4747; }
</style>

<script>
    $(document).ready(function(){
            $(".addMore").click(function(){
                var fieldHTML = '<div class="eventGroup">'+$(".eventGroupCopy").html()+'</div>';    $('body').find('.eventGroup:last').after(fieldHTML);
            });//add more fields group

        $("body").on("click",".remove",function(){  $(this).parents(".eventGroup").remove();    });//remove fields group
    });

function checkFormOK(field) {
//alert(    field + ' ' + $('input:text').val());
// When a field is changed, check if it is empty, if so, mark as red.
    if (field == 'n') { // process the names.
        if ($('input:text').val().length == 0) {
//          alert('empty');
            $('.n').addClass('formError');      //      does not change the BG color.
        } else { $('.n').removeClass('formError');
        }
    }
//  if (field == 'p') { // process the prices.
//  }

//  When a date field is changed, check if the dates entered overlap any of the other dates in other groups.
//  if (field == 's' || field == 'e') { // process the dates.
//  }

}

/*
// When a date field is changed, check if the dates entered overlap any of the other dates in other groups.
//var startDates = document.getElementsByClassName('s');
//var endDates = document.getElementsByClassName('e');
//  for (let s = 0; s < startEndDates.length; s++) {
//      for (let e = 0; e < startEndDates.length; e++) {
            //console.log(groups[i].value);

            if (s1 != s2) { // do not check a group with itself !, skip to next one.
                if (document.getElementsByClassName('s' + s1).value >= document.getElementsByClassName('s' + s2).value &&
                document.getElementsByClassName('e' + s1).value < document.getElementsByClassName('e' + s2).value) {
                        document.getElementsByClassName('s' + s1).className = 'se formError'; document.getElementsByClassName('s' + s2).className = 'se formError';
                        document.getElementsByClassName('e' + s1).className = 'se formError'; document.getElementsByClassName('e' + s2).className = 'se formError';
                }
            }

//      }
//  } 
*/
</script>

</head>
<body>

<form method="post" action="editDatePrices.php">
        <div class="centerText">
            <div class="eventGroup">
                <input class="n" onchange="checkFormOK('n')" type="text" name="eventName[]" placeholder="Enter name" value="Event 1"><br>
                <input class="p" onchange="checkFormOK('p')" type="number" name="price[]" placeholder="Enter Price i.e.&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;no decimals" value="123"><br>
                <input class="s" onchange="checkFormOK('s')" type="date" name="eventStart[]" value="2023-08-13">
                <input class="e" onchange="checkFormOK('e')" type="date" name="eventEnd[]" value="2023-08-14">
                <div class="clearFloat"></div>
                <a href="javascript:void(0)" class="remove">Remove</a>
            </div>
            <div class="eventGroup">
                <input class="n" onchange="checkFormOK('n')" type="text" name="eventName[]" placeholder="Enter name" value="Event 1"><br>
                <input class="p" onchange="checkFormOK('p')" type="number" name="price[]" placeholder="Enter Price i.e.&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;no decimals" value="123"><br>
                <input class="s" onchange="checkFormOK('s')" type="date" name="eventStart[]" value="2023-08-13">
                <input class="e" onchange="checkFormOK('e')" type="date" name="eventEnd[]" value="2023-08-14">
                <div class="clearFloat"></div>
                <a href="javascript:void(0)" class="remove">Remove</a>
            </div>
        <div class="eventGroup" style="display: none;"></div>
        <div class="clearFloat"></div>
        </div>
    <br><a href="javascript:void(0)" class="addMore">Add more</a>
    <input type="submit" name="submit" value="SUBMIT" onclick="checkFormOK()">
</form>

            <!-- copy of input fields group -->
            <div class="eventGroupCopy" style="display: none;">
                <input class="n" onchange="checkFormOK('n')" type="text" name="eventName[]" placeholder="Enter Event Name" value=""><br>
                <input class="p" onchange="checkFormOK('p')" type="number" name="price[]" placeholder="Enter Price" value=""><br>
                <input class="s" onchange="checkFormOK('s')" type="date" name="eventStart[]" value="">
                <input class="e" onchange="checkFormOK('e')" type="date" name="eventEnd[]" value=""><br>
                <a href="javascript:void(0)" class="remove">Remove</a><br>
            </div>


</body>
</html>

jquery 这个

评论

答：

0赞 4b0 8/13/2023 #1

在函数中触发更改事件时传递额外的参数，例如 .并根据该参数添加和删除您的类。checkFormOK('n',$(this))

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Untitled Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <?php // this line nust be first before the jquery-ui.js ?>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>


  <style>
    .eventGroup {
      float: left;
      padding: 0 3em 3em 0;
    }
    
    .eventGroup .n,
    .eventGroup .p {
      width: 20em;
    }
    
    .eventGroup .s,
    .eventGroup .e {
      float: left;
      width: 10em;
    }
    
    .addMore {
      padding-right: 1.5em;
    }
    
    .formError {
      background-color: #FF4747;
    }
  </style>

  <script>
    $(document).ready(function() {
      $(".addMore").click(function() {
        var fieldHTML = '<div class="eventGroup">' + $(".eventGroupCopy").html() + '</div>';
        $('body').find('.eventGroup:last').after(fieldHTML);
      }); //add more fields group

      $("body").on("click", ".remove", function() {
        $(this).parents(".eventGroup").remove();
      }); //remove fields group
    });

    function checkFormOK(field, _this) {
      //alert(field);
      //alert(    field + ' ' + $('input:text').val());
      // When a field is changed, check if it is empty, if so, mark as red.
      if (field == 'n') { // process the names.
        if (_this.val().length == 0) {
          //alert('empty');
          _this.addClass('formError'); //      does not change the BG color.
        } else {
          _this.removeClass('formError');
        }
      }
      //  if (field == 'p') { // process the prices.
      //  }

      //  When a date field is changed, check if the dates entered overlap any of the other dates in other groups.
      //  if (field == 's' || field == 'e') { // process the dates.
      //  }

    }

    /*
    // When a date field is changed, check if the dates entered overlap any of the other dates in other groups.
    //var startDates = document.getElementsByClassName('s');
    //var endDates = document.getElementsByClassName('e');
    //  for (let s = 0; s < startEndDates.length; s++) {
    //      for (let e = 0; e < startEndDates.length; e++) {
                //console.log(groups[i].value);

                if (s1 != s2) { // do not check a group with itself !, skip to next one.
                    if (document.getElementsByClassName('s' + s1).value >= document.getElementsByClassName('s' + s2).value &&
                    document.getElementsByClassName('e' + s1).value < document.getElementsByClassName('e' + s2).value) {
                            document.getElementsByClassName('s' + s1).className = 'se formError'; document.getElementsByClassName('s' + s2).className = 'se formError';
                            document.getElementsByClassName('e' + s1).className = 'se formError'; document.getElementsByClassName('e' + s2).className = 'se formError';
                    }
                }

    //      }
    //  } 
    */
  </script>

</head>

<body>

  <form method="post" action="editDatePrices.php">
    <div class="centerText">
      <div class="eventGroup">
        <input class="n" onchange="checkFormOK('n' ,$(this))" type="text" name="eventName[]" placeholder="Enter name" value="Event 1"><br>
        <input class="p" onchange="checkFormOK('p',$(this))" type="number" name="price[]" placeholder="Enter Price i.e.&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;no decimals" value="123"><br>
        <input class="s" onchange="checkFormOK('s',$(this))" type="date" name="eventStart[]" value="2023-08-13">
        <input class="e" onchange="checkFormOK('e',$(this))" type="date" name="eventEnd[]" value="2023-08-14">
        <div class="clearFloat"></div>
        <a href="javascript:void(0)" class="remove">Remove</a>
      </div>
      <div class="eventGroup">
        <input class="n" onchange="checkFormOK('n',$(this))" type="text" name="eventName[]" placeholder="Enter name" value="Event 1"><br>
        <input class="p" onchange="checkFormOK('p',$(this))" type="number" name="price[]" placeholder="Enter Price i.e.&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;no decimals" value="123"><br>
        <input class="s" onchange="checkFormOK('s',$(this))" type="date" name="eventStart[]" value="2023-08-13">
        <input class="e" onchange="checkFormOK('e',$(this))" type="date" name="eventEnd[]" value="2023-08-14">
        <div class="clearFloat"></div>
        <a href="javascript:void(0)" class="remove">Remove</a>
      </div>
      <div class="eventGroup" style="display: none;"></div>
      <div class="clearFloat"></div>
    </div>
    <br><a href="javascript:void(0)" class="addMore">Add more</a>
    <input type="submit" name="submit" value="SUBMIT" onclick="checkFormOK()">
  </form>

  <!-- copy of input fields group -->
  <div class="eventGroupCopy" style="display: none;">
    <input class="n" onchange="checkFormOK('n',$(this))" type="text" name="eventName[]" placeholder="Enter Event Name" value=""><br>
    <input class="p" onchange="checkFormOK('p',$(this))" type="number" name="price[]" placeholder="Enter Price" value=""><br>
    <input class="s" onchange="checkFormOK('s',$(this))" type="date" name="eventStart[]" value="">
    <input class="e" onchange="checkFormOK('e',$(this))" type="date" name="eventEnd[]" value=""><br>
    <a href="javascript:void(0)" class="remove">Remove</a><br>
  </div>


</body>

</html>

评论

0赞 jasonc310771 8/14/2023
感谢您的回复。我已经完全重写了代码以消除 ID。在添加新组时发现一个问题，由于数字排序已结束，因此找不到该组。将发布一个仍然有相同问题的新问题

上一个：jquery 获取 blur one 后的输入值列表

下一个：在 C++ 中，将结构作为参数的自由函数是否比具有成员函数的类更快地执行相同的操作？