jquery - 仅添加/删除一个输入字段的类，而不是全部使用 $(this)

问题描述 投票：0回答：1

所以现在我让它改变 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 this
1个回答
0
投票

在函数中发生更改事件时传递额外参数，如 

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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.