Как показать элемент по клику (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 только после нажатия кнопки.

Демо

$(".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, чтобы вы могли связать вместе определенную кнопку с нужным текстом

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();
});