对 jquery 很陌生,遇到了一个问题,我想在我请求的最接近的类上切换一个类。
下面的代码示例,我在这里做错了什么?
// more info functions
$('.popup').click(function() {
$(this).closest('.popup-input').toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column medium">
<div class="icon info popup">link</div>
<div class="icon more"></div>
</div>
<input type="text" id="PC_Row_1_Popup" name="PC_Row_1_Popup" value="" placeholder="More info description" class="hidden popup-input form-control ccm-input-text">
<div class="column medium">
<div class="icon info popup">link</div>
<div class="icon more"></div>
</div>
<input type="text" id="PC_Row_2_Popup" name="PC_Row_2_Popup" value="" placeholder="More info description" class="hidden popup-input form-control ccm-input-text">
<div class="column medium">
<div class="icon info popup">link</div>
<div class="icon more"></div>
</div>
<input type="text" id="PC_Row_3_Popup" name="PC_Row_3_Popup" value="" placeholder="More info description" class="hidden popup-input form-control ccm-input-text">
<div class="column medium">
<div class="icon info popup">link</div>
<div class="icon more"></div>
</div>
<input type="text" id="PC_Row_4_Popup" name="PC_Row_4_Popup" value="" placeholder="More info description" class="hidden popup-input form-control ccm-input-text">
最佳答案
您可以使用 parent()
向上移动到父 div 然后使用 next('.popup-input')
以类 popup-input
为目标的下一个元素最后使用 toggleClass()
切换类, 检查下面的例子。
希望这对您有所帮助。
$('.popup').click(function() {
$(this).parent().next('.popup-input').toggleClass('hidden');
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column medium">
<div class="icon info popup">link</div>
<div class="icon more"></div>
</div>
<input type="text" id="PC_Row_1_Popup" name="PC_Row_1_Popup" value="" placeholder="More info description" class="popup-input form-control ccm-input-text">
<div class="column medium">
<div class="icon info popup">link</div>
<div class="icon more"></div>
</div>
<input type="text" id="PC_Row_2_Popup" name="PC_Row_2_Popup" value="" placeholder="More info description" class="popup-input form-control ccm-input-text">
<div class="column medium">
<div class="icon info popup">link</div>
<div class="icon more"></div>
</div>
<input type="text" id="PC_Row_3_Popup" name="PC_Row_3_Popup" value="" placeholder="More info description" class="popup-input form-control ccm-input-text">
<div class="column medium">
<div class="icon info popup">link</div>
<div class="icon more"></div>
</div>
<input type="text" id="PC_Row_4_Popup" name="PC_Row_4_Popup" value="" placeholder="More info description" class="popup-input form-control ccm-input-text">
关于javascript - jQuery 在 div 和切换类之外找到下一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34177033/