如何显示点击元素（jQuery）？

Question

在下面的代码中，我有3个按钮，每个按钮下面都有内容。当我单击一个按钮时，它将显示所有按钮的内容。我只想显示单击按钮的内容。

$(".item").click(function() {
  $(".d-text").show();
});

.d-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="item item1">button</button>
<p class="d-text">Dummy text</p>

<button class="item item2">button</button>
<p class="d-text">Dummy text</p>

<button class="item item3">button</button>
<p class="d-text">Dummy text</p>

Answer 1

您必须使用.next()

$(this).next(".d-text").show();

这只会在您单击的按钮之后显示下一个p。

Demo

$(".item").click(function() {
  $(this).next(".d-text").show();
});

.d-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="item item1">button</button>
<p class="d-text">Dummy text</p>

<button class="item item2">button</button>
<p class="d-text">Dummy text</p>

<button class="item item3">button</button>
<p class="d-text">Dummy text</p>

Answer 2

您需要为每个p项目添加特定的类/ id，以便您可以将具有正确文本的特定按钮链接在一起

https://jsfiddle.net/zdyw8ra4/

HTML：

<button class="item item1"data-target="#item1">button</button>
<p class="d-text"id="item1">Dummy text1</p>

<button class="item item2"data-target="#item2">button</button>
<p class="d-text" id="item2">Dummy text2</p>

<button class="item item3" data-target="#item3">button</button>
<p class="d-text"id="item3">Dummy text3</p>

JS：

$(".item").click(function() {
  $($(this).data('target')).toggle();
});