我的页面here有多个复选框，每个复选框下面都有自己的文本区域。在页面加载时，文本区域被隐藏。单击复选框切换文本区域，然后在下方显示一个字符计数器。
对于所有复选框/文本区域对，这正如我所需要的那样工作。我的问题是，为了节省时间并向客户端展示功能，我为每一对重复了 jQuery 代码。我知道有一种方法可以使用 each 或其方法之一来对所有对使用相同的代码，但我很难让它发挥作用。
在 HTML 中，我尽力为所有复选框、文本区域、两者的包装器、每个整个部分的包装器使用 ID 和类，目的是能够使用 jQuery 和/或 JS 选择器来选择任何东西.
如果这个问题措辞不当，请帮助我改进(我认为这个是，但 StackOverflow 在页面顶部给我警告说有被阻止的危险。)
我只会粘贴重复的三段代码。
那么，我怎样才能不重复代码并拥有与现在完全相同的功能呢？我认为这将使用 each 并可能更改重新使用的选择器，但我需要帮助才能做到这一点!
代码片段:
/*
* 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>最佳答案
你不需要依赖于 id 所以你可以让你的代码更抽象。
您可以使用 this 作为对当前元素的引用，然后使用 next、closest、parent 遍历 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>更新
当您的复选框被选中但文本区域被隐藏时，您可能会遇到这个问题。要解决它，您需要更新代码以设置类 .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>
关于javascript - 我如何使用 jQuery 的 each() 来实现我的字符数和文本区域切换，每个部分都有自己的表单元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53730986/