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()切换类，查看示例波纹管。

希望这有帮助。

＆＃13;

$('.popup').click(function() {
    $(this).parent().next('.popup-input').toggleClass('hidden');
})

＆＃13;

.hidden {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

$('.popup').closest('.poput-input')

在向上移动时会给你最近的祖先。

您可以使用

$(this).parent().next('.popup-input');

遍历（向下）到DOM树中的下一个弹出输入。

Answer 3

您也可以使用javascript代码段进行切换。您需要稍微更改JS和HTML代码。

// more info functions
$('.popup').click(function() {
    $(this).closest('.column').find('.popup-input').toggleClass('hidden');
});

<div class="column medium">
  <div class="icon info popup">link</div>
  <div class="icon more"></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>

jQuery在div之外找到下一个类并切换类

3 个答案: