javascript - jQuery 在 div 和切换类之外找到下一个类

Question

对 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">

Answer 1

您可以使用 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">