Question

是否可以显示/隐藏每个按钮的最近文本框类？不是一次全部？

$(".text-box").hide();

$(".read-more").on("click", function() {
  $(this).closest(".text-box").show();
});
$(".read-less").on("click", function() {
  $(this).closest(".text-box").hide();
});

.text-box {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-box">text box text</div>
<div class="body-text">body text</div>
<button class="button">reveal text</button>
<button class="button read-less">hide text</button>

<div class="text-box">test box text</div>
<div class="body-text">body text</div>
<button class="button">reveal text</button>
<button class="button read-less">hide text</button>

<div class="text-box">test box text</div>
<div class="body-text">body text</div>
<button class="button read-more">reveal text</button>
<button class="button read-less">hide text</button>

Answer 1

您可以将self.myCursor.execute("SELECT * FROM Students WHERE {}".format(self.criteria)) ... students = myWrapper.get_students("reg_no = 'F17/42770/2017'")与prevAll()结合使用：

first()

$(".read-more").on("click", function() { $(this).prevAll(".text-box").first().show(); }); $(".read-less").on("click", function() { $(this).prevAll(".text-box").first().hide(); });获取与选择器prevAll(".text-box")匹配的所有先前兄弟姐妹，.text-box返回第一个兄弟姐妹。

Answer 2

closest()不会为你完成这项工作，因为它会通过父母返回最近的父级，但你可以这样做，如果你不想改变你的HTML包裹你的部分额外的div块

$(function() {
$(".text-box").hide();

$(".read-more").on("click", function() {
   $(this).prevAll('.text-box').first().show();
});
$(".read-less").on("click", function() {
   $(this).prevAll('.text-box').first().hide();
});
});

.text-box {
 /* float: right; */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-box">text box text 1</div>
<div class="body-text">body text</div>
<button class="button read-more">reveal text</button>
<button class="button read-less">hide text</button>

<div class="text-box">test box text 2</div>
<div class="body-text">body text</div>
<button class="button read-more">reveal text</button>
<button class="button read-less">hide text</button>

<div class="text-box">test box text 3</div>
<div class="body-text">body text</div>
<button class="button read-more">reveal text</button>
<button class="button read-less">hide text</button>

Answer 3

问题是您正在尝试使用closest()来查找元素的兄弟。然而，最接近元素的父母，而不是兄弟姐妹的dom。我建议你给每个逻辑组一个包装元素，这样它们就会共享一个共同的父元素，然后你就可以正确地使用最接近的find来获取你想要为改变而定位的元素。

$(".text-box").hide();

$(".read-more").on("click", function() {
  $(this).closest('.text-container').find(".text-box").show();
});
$(".read-less").on("click", function() {
  $(this).closest('.text-container').find(".text-box").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="text-container">
  <div class="text-box">text box text</div>
  <div class="body-text">body text</div>
  <button class="button read-more">reveal text</button>
  <button class="button read-less">hide text</button>
</span>

<span class="text-container">
  <div class="text-box">text box text</div>
  <div class="body-text">body text</div>
  <button class="button read-more">reveal text</button>
  <button class="button read-less">hide text</button>
</span>

<span class="text-container">
  <div class="text-box">text box text</div>
  <div class="body-text">body text</div>
  <button class="button read-more">reveal text</button>
  <button class="button read-less">hide text</button>
</span>

选择与单击元素最近的类

3 个答案: