我如何使用 jQuery 的 each() 实现我的字符数和文本区域切换，每个部分都有自己的表单元素？

Question

我的页面 here 有多个复选框，每个复选框下面都有自己的文本区域。在页面加载时，文本区域被隐藏。单击复选框 toggle 文本区域，然后在下方显示一个字符计数器。

对于所有的复选框/文本区域对，这正如我所需要的那样有效。我的问题是，为了节省时间和 向客户端显示 功能，我为每一对重复了 jQuery 代码。我知道有一种方法可以使用 each 或其方法之一来对所有对使用相同的代码，但我很难让它工作。

在 HTML 中，我尽力使用 ID 和类用于所有复选框、文本区域、两者的包装器、每个整个部分的包装器，目的是能够使用 jQuery 和/或 JS select 或者 select 任何东西。

如果这个问题措辞不好，请帮助我改进（我认为 this 一个是，但 Whosebug 在页面顶部给我警告关于危险被屏蔽了。）

我只会粘贴重复的三段代码。

那么，我怎样才能不重复代码并拥有与现在完全相同的功能呢？我认为这将使用 each 并且可能会更改 select 或重新使用的内容，但我需要帮助！

代码片段：

 

/*
     * orderformpage3.php text area show hide and character count  
     * this code needs to use an each method to iterate instead of repeat. For now, it is repeating.
     */
    $(document).ready(function() {

          /*
           * for birthday parties
           */
          // toggle visibility of text area on checkbox click
          $("#birthdayParties").click(function() {
            // $("#birthdayPartiesInput").toggleClass("show");
            $("#birthdayPartiesWrap").toggle(500);
          });

          // Character counter
          $("#birthdayPartiesInput").on('keyup', function(e) {
            var counter, textEntered, countRemaining;
            // get the number of characters in the box
            textEntered = $("#birthdayPartiesInput").val();
            // number left = number of characters - our maximum
            var counter = (500 - (textEntered.length));
            // access the div for characters remaining
            countRemaining = $("#charactersRemainingBirthday");
            // put the number of characters left into that div
            countRemaining.text(counter + ' characters remnaining');
          });

          /*
           * for fun activities
           */
          // toggle visibility of text area on checkbox click
          $("#funActivities").click(function() {
            // $("#birthdayPartiesInput").toggleClass("show");
            $("#funActivitiesWrap").toggle(500);
          });

          // Character counter
          $("#funActivitiesInput").on('keyup', function(e) {
            var counter, textEntered, countRemaining;
            // get the number of characters in the box
            textEntered = $("#funActivitiesInput").val();
            // number left = number of characters - our maximum
            var counter = (500 - (textEntered.length));
            // access the div for characters remaining
            countRemaining = $("#charactersRemainingFunActivities");
            // put the number of characters left into that div
            countRemaining.text(counter + ' characters remnaining');
          });

          /*
           * for Summer Camps
           */
          // toggle visibility of text area on checkbox click
          $("#summerCamps").click(function() {
            // $("#birthdayPartiesInput").toggleClass("show");
            $("#summerCampsWrap").toggle(500);
          });

          // Character counter
          $("#summerCampsInput").on('keyup', function(e) {
            var counter, textEntered, countRemaining;
            // get the number of characters in the box
            textEntered = $("#summerCampsInput").val();
            // number left = number of characters - our maximum
            var counter = (500 - (textEntered.length));
            // access the div for characters remaining
            countRemaining = $("#charactersRemainingSummerCamps");
            // put the number of characters left into that div
            countRemaining.text(counter + ' characters remnaining');
          });
       });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <div class="category-row">
      <div class="form-group row align-items-center">
        <div class="col-xs-1 ml-3">
          <input type="checkbox" name="birthdayparties" class="col-form-label form-control category-checkbox" id="birthdayParties" />
        </div>
        <label for="birthdayParties" class="col-xs-3 ml-2 col-form-label">Birthday Parties</label>
        <div class="col-sm-12 description-wrap hide" id="birthdayPartiesWrap">
          <textarea name="birthdaypartiesdescription" type="text" class="form-control col-form-label category-text" id="birthdayPartiesInput">Lorem Ipsum</textarea>
          <div class="charactersRemaining" id="charactersRemainingBirthday">500 characters remnaining</div>
        </div>
      </div>
    </div>



   <div class="category-row">
          <div class="form-group row align-items-center">
            <div class="col-xs-1 ml-3">
            <?php if ($birthdayparties == true) {$birthdaypartieschecked = 'checked';} else { $birthdaypartieschecked = '';}?>


             <input type="checkbox" name="birthdayparties" class="col-form-label form-control category-checkbox" id="birthdayParties" <?php echo $birthdaypartieschecked; ?>/>
           </div>
            <label for="birthdayParties" class="col-xs-3 ml-2 col-form-label">Birthday Parties</label>
            <div class="col-sm-12 description-wrap hide" id="birthdayPartiesWrap" >
              <textarea name="birthdaypartiesdescription" type="text" class="form-control col-form-label category-text" id="birthdayPartiesInput"><?php echo $_SESSION['birthdaypartiesdescription']; ?></textarea>
              <div class="charactersRemaining" id="charactersRemainingBirthday">500 characters remnaining</div>
            </div>
          </div>
        </div>



        <div class="category-row">
          <div class="form-group row align-items-center">
           <div class="col-xs-1 ml-3">
           <?php if ($funactivities == true) {$funactivitieschecked = 'checked';} else { $funactivitieschecked = '';}?>
             <input type="checkbox" name="funactivities" class="col-form-label form-control category-checkbox" id="funActivities" <?php echo $funactivitieschecked; ?>/>
           </div>
            <label for="funActivities" class="col-xs-3 ml-2 col-form-label">Fun Activities</label>
            <div class="col-sm-12 description-wrap hide" id="funActivitiesWrap">
              <textarea name="funactivitiesdescription" type="text" class="form-control col-form-label category-text" id="funActivitiesInput"><?php echo $_SESSION['sessfunactivitiesdescription']; ?></textarea>
              <div class="charactersRemaining" id="charactersRemainingFunActivities">500 characters remnaining</div>
            </div>
          </div>
        </div>

        <div class="category-row">
          <div class="form-group row align-items-center">
           <div class="col-xs-1 ml-3">
           <?php if ($summercamps == true) {
    $summercampschecked = 'checked';
    echo '<script>';
    echo '$("#summerCampsWrap").toggle(100);';
    echo '</script>';
} else {
    $summercampschecked = '';
    echo '<script>';
    echo '$("#summerCampsWrap").toggle(100);';
    echo '</script>';
}
?>




  <input type="checkbox" name="summercamps" class="col-form-label
form-control category-checkbox" id="summerCamps" <?php echo
    $summercampschecked; ?>/>
           </div>
            <label for="summerCamps" class="col-xs-3 ml-2 col-form-label">Summer Camps</label>
            <div class="col-sm-12 description-wrap hide" id="summerCampsWrap">
              <textarea name="summercampsdescription" type="text"  class="form-control col-form-label category-text" id="summerCampsInput"><?php echo $_SESSION['sesssummercampsdescription']; ?></textarea>
              <div class="charactersRemaining" id="charactersRemainingSummerCamps">500 characters remnaining</div>
            </div>
          </div>
        </div>

Answer 1

你不需要依赖 id 所以你可以让你的代码更抽象。
您可以使用 this 作为对当前元素的引用，然后使用 next、closest、parent、find 等遍历 DOM

你在这里：

/*
 * orderformpage3.php text area show hide and character count  
 * this code needs to use an each method to iterate instead of repeat. For now, it is repeating.
 */
$(document).ready(function() {

  // toggle visibility of text area on checkbox click
  $(".category-checkbox").click(function() {
    $(this).closest(".category-row")
      .find('.description-wrap').toggle(500)
      .find('textarea').keyup();
  });

  // Character counter
  $(".category-text").on('keyup', function(e) {
    var counter, textEntered, countRemaining;
    textEntered = $(this).val();
    var counter = (500 - (textEntered.length));
    $(this).next(".charactersRemaining")
      .text(counter + ' characters remnaining');
  });

});

.hide {
  display: none
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="category-row">
  <div class="form-group row align-items-center">
    <div class="col-xs-1 ml-3">
      <input type="checkbox" name="birthdayparties" class="col-form-label form-control category-checkbox" id="birthdayParties" />
    </div>
    <label for="birthdayParties" class="col-xs-3 ml-2 col-form-label">Birthday Parties</label>
    <div class="col-sm-12 description-wrap hide" id="birthdayPartiesWrap">
      <textarea name="birthdaypartiesdescription" type="text" class="form-control col-form-label category-text" id="birthdayPartiesInput">birthday parties description</textarea>
      <div class="charactersRemaining" id="charactersRemainingBirthday">500 characters remnaining</div>
    </div>
  </div>
</div>



<div class="category-row">
  <div class="form-group row align-items-center">
    <div class="col-xs-1 ml-3">
      <input type="checkbox" name="funactivities" class="col-form-label form-control category-checkbox" id="funActivities" />
    </div>
    <label for="funActivities" class="col-xs-3 ml-2 col-form-label">Fun Activities</label>
    <div class="col-sm-12 description-wrap hide" id="funActivitiesWrap">
      <textarea name="funactivitiesdescription" type="text" class="form-control col-form-label category-text" id="funActivitiesInput">sess fun activities description</textarea>
      <div class="charactersRemaining" id="charactersRemainingFunActivities">500 characters remnaining</div>
    </div>
  </div>
</div>

<div class="category-row">
  <div class="form-group row align-items-center">
    <div class="col-xs-1 ml-3">
      <input type="checkbox" name="summercamps" class="col-form-label form-control category-checkbox" id="summerCamps" />
    </div>
    <label for="summerCamps" class="col-xs-3 ml-2 col-form-label">Summer Camps</label>
    <div class="col-sm-12 description-wrap hide" id="summerCampsWrap">
      <textarea name="summercampsdescription" type="text" class="form-control col-form-label category-text" id="summerCampsInput"> sess summer camps description</textarea>
      <div class="charactersRemaining" id="charactersRemainingSummerCamps">500 characters remnaining</div>
    </div>
  </div>
</div>

更新

当您的复选框被选中但文本区域被隐藏时，您可能会遇到这个问题。要解决它，您需要更新代码以设置 class .hide，如下所示：

<div class="category-row">
  <div class="form-group row align-items-center">
    <div class="col-xs-1 ml-3">
      <?php if ($birthdayparties == true) {$birthdaypartieschecked = 'checked';} else {$birthdaypartieschecked = '';} ?>
      <input type="checkbox" name="birthdayparties" class="col-form-label form-control category-checkbox" id="birthdayParties" <?php echo $birthdaypartieschecked; ?>/>
    </div>
    <label for="birthdayParties" class="col-xs-3 ml-2 col-form-label">Birthday Parties</label>
    <div class="col-sm-12 description-wrap <?php echo ($birthdayparties ? '' : 'hide'); ?>" id="birthdayPartiesWrap">
      <textarea name="birthdaypartiesdescription" type="text" class="form-control col-form-label category-text" id="birthdayPartiesInput"><?php echo $_SESSION['birthdaypartiesdescription']; ?></textarea>
      <div class="charactersRemaining" id="charactersRemainingBirthday">500 characters remnaining</div>
    </div>
  </div>
</div>

Answer 2

我试图改进 jquery。这样你就只会写 jquery 一次。但是，为此我需要将“#charactersRemainingBirthday”更改为“#birthdayPartiesInputRemaining”，请查看我的代码段。

希望能对您有所帮助。

祝你有个愉快的一天！

$(document).ready(function(){

    $(".category-checkbox").click(function(){
        $("#"+$(this).attr('id')+"Wrap").toggle(500);
    });

    $(".category-text").on('keyup', function(e){
        var counter, textEntered, countRemaining;
        textEntered = $(this).val();
        var counter = (500 - (textEntered.length));
        countRemaining = $("#"+$(this).attr('id')+"Remaining");
        countRemaining.text(counter + ' characters remnaining');
    });
})

.hide{
display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="category-row">
 <div class="form-group row align-items-center">
  <div class="col-xs-1 ml-3">
   <input type="checkbox" name="birthdayparties" class="col-form-label form-control category-checkbox" id="birthdayParties" />
  </div>
  <label for="birthdayParties" class="col-xs-3 ml-2 col-form-label">Birthday Parties</label>
  <div class="col-sm-12 description-wrap hide" id="birthdayPartiesWrap" >
   <textarea name="birthdaypartiesdescription" type="text" class="form-control col-form-label category-text" id="birthdayPartiesInput"></textarea>
   <div class="charactersRemaining" id="birthdayPartiesInputRemaining">500 characters remnaining</div>
  </div>
 </div>
</div>

<div class="category-row">
 <div class="form-group row align-items-center">
  <div class="col-xs-1 ml-3">
   <input type="checkbox" name="funactivities" class="col-form-label form-control category-checkbox" id="funActivities" />
  </div>
  <label for="funActivities" class="col-xs-3 ml-2 col-form-label">Fun Activities</label>
  <div class="col-sm-12 description-wrap hide" id="funActivitiesWrap">
   <textarea name="funactivitiesdescription" type="text" class="form-control col-form-label category-text" id="funActivitiesInput"></textarea>
   <div class="charactersRemaining" id="funActivitiesInputRemaining">500 characters remnaining</div>
  </div>
 </div>
</div>

<div class="category-row">
 <div class="form-group row align-items-center">
  <div class="col-xs-1 ml-3">
   <input type="checkbox" name="otheractivities" class="col-form-label form-control category-checkbox" id="otherActivities" />
  </div>
  <label for="otherActivities" class="col-xs-3 ml-2 col-form-label">Other Activities</label>
  <div class="col-sm-12 description-wrap hide" id="otherActivitiesWrap">
   <textarea name="otheractivitiesdescription" type="text" class="form-control col-form-label category-text" id="otherActivitiesInput"></textarea>
   <div class="charactersRemaining" id="otherActivitiesInputRemaining">500 characters remnaining</div>
  </div>
 </div>
</div>

我如何使用 jQuery 的 each() 实现我的字符数和文本区域切换，每个部分都有自己的表单元素？

how can i use jQuery's each() to implement my character count & text area toggle for sections each having its own form elements?

html

javascript

jquery

dry