Изменить текст по нажатию на кнопку только в конкретном блоке

Question

У меня есть 2 карточки товара, каждая карточка содержит картинку, название, текст и кнопку.

Мне нужно чтобы по нажатию кнопки текст на карточке менялся, причем для каждой карточки разный текст.

Нельзя использовать id кнопки, все остальное можно.

Пробовал использовать .hasClass() и closest() но эти методы всегда возвращают последнее заданное значение, например:

    if ($('btn').closest('#first_title')) {
        $( "span.title" ).text("first title");
    }

    if ($('btn').closest('#second_title')) {
        $( "span.title" ).text("second title");
    }

После выполнения этого кода, название обеих кнопок будет изменено на second title (при нажатии разумеется).

Что делать?

Answer 1

Это достаточно просто сделать при помощи метода closest():

const newTextString = "new text new text new text"

const handleClick = event => {
  $(event.target).closest(".wrapper").find(".text").html(newTextString)
}

$("button").on("click", handleClick)

.wrapper {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-column-gap: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.image {
  grid-column: 1 / 1;
  grid-row: 1 / span 2;
  width: 60px;
  height: 100px;
  border: 1px solid #ccc;
}

.name, .text {
  grid-column: 2 / 2;
  margin: 0;
}

.name {
  grid-row: 1;
}

.text {
  grid-row: 2;
}

button {
  grid-column: 3 / 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="image"></div>
  <h1 class="name">Name 1</h1>
  <p class="text">text text text</p>
  <button>Change Text</button>
</div>

<div class="wrapper">
  <div class="image"></div>
  <h1 class="name">Name 2</h1>
  <p class="text">text text text</p>
  <button>Change Text</button>
</div>

Что бы задать разный текст для блоков:

const strings = {
  one: "new text 1 new text 1 new text 1",
  two: "new text 2 new text 2 new text 2"
}

const handleClick = event => {
  const $wrapper = $(event.target).closest(".wrapper")
  const data_text = $wrapper.attr("data-text") 
  $wrapper.find(".text").html(strings[data_text])
}

$("button").on("click", handleClick)

.wrapper {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-column-gap: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.image {
  grid-column: 1 / 1;
  grid-row: 1 / span 2;
  width: 60px;
  height: 100px;
  border: 1px solid #ccc;
}

.name,
.text {
  grid-column: 2 / 2;
  margin: 0;
}

.name {
  grid-row: 1;
}

.text {
  grid-row: 2;
}

button {
  grid-column: 3 / 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper" data-text="one">
  <div class="image"></div>
  <h1 class="name">Name 1</h1>
  <p class="text">text text text</p>
  <button>Change Text</button>
</div>

<div class="wrapper" data-text="two">
  <div class="image"></div>
  <h1 class="name">Name 2</h1>
  <p class="text">text text text</p>
  <button>Change Text</button>
</div>

БЛОГ НА HUSL

Изменить текст по нажатию на кнопку только в конкретном блоке

Ответы (1 шт):