Получение определенного <p>внутри класса div whit only, без ID

Question

Хорошо, вот часть моего кода >>

<div class="storeMenuTwoItem" onclick="addToCart()">
  <img src="resources/img/si/SI_EmpireDesodorante.jpg" class="storeMenuBodyTwoImg" />
  <p class="storeMenuTwoBodyText">Empire Desodo.</p>
  <p class="storeMenuTwoBodyPrice">23 R$</p>
</div>
<div class="storeMenuTwoItem" onclick="addToCart()">
  <img src="resources/img/si/SI_EspumaBarbear.jpg" class="storeMenuBodyTwoImg" />
  <p class="storeMenuTwoBodyText">Espuma Barbear</p>
  <p class="storeMenuTwoBodyPrice">22 R$</p>
</div>
<div class="storeMenuTwoItem" onclick="addToCart()">
  <img src="resources/img/si/SI_ShampooAntCaspa.jpg" class="storeMenuBodyTwoImg" />
  <p class="storeMenuTwoBodyText">Shampoo AC</p>
  <p class="storeMenuTwoBodyPrice">33 R$</p>
</div>

Я хочу использовать javascript, чтобы получить фактический div, по которому щелкают, это событие onclick должно добавить в корзину div.p (class = "storeMenuTwoBodyText"). TextContent (что-то подобное я имею в виду) и положить в корзину. это уже сделано.

Это мой первый вопрос здесь, извините, если мне нужно быть более конкретным, вы, ребята, можете прокомментировать ниже, и я отредактирую пост, я разместлю код JavaScript, который у меня уже здесь >>

function addToCart() {
    storeTwoItemInfo.style.display = "block";
    storeTwoItemHeader.textContent = this.textContent;
}

Ах да, у меня есть вар и все уже установлено.

Answer 1

Ребята, я нашел способ сделать это, я взял все ваши идеи и смешал некоторые вещи >> `function addToCart () { storeTwoItemInfo.style.display = "block";

storeTwoModalPhoto.src = event.target.querySelector(".storeMenuBodyTwoImg").src;
storeTwoModalHeader.innerHTML = event.target.querySelector(".storeMenuTwoBodyText").innerHTML;
storeTwoModalPrice.innerHTML = event.target.querySelector(".storeMenuTwoBodyPrice").innerHTML;
storeTwoModalText.innerHTML = event.target.querySelector(".storeMenuBodyTwoImg").alt;

} `

Спасибо за помощь, позаботьтесь.

Answer 2

Получить элемент click из свойства event.target. Это может быть сам div или любой элемент внутри него. Проверьте, какой это элемент по имени класса, и если это не элемент div, тогда получите элемент div по свойству parentElement. Затем из этого элемента div вы можете получить доступ к любому его элементу по имени класса.

function addToCart() {
  console.log(event.target.className);
  var divElement = event.target;

  if(event.target.className !== 'storeMenuTwoItem'){
     divElement = event.target.parentElement;
  }
  console.log(divElement.className);

  var pElement =divElement.getElementsByClassName('storeMenuTwoBodyText').length > 0 ?                    divElement.getElementsByClassName('storeMenuTwoBodyText')[0] : null ;

  if(pElement){
     console.log(pElement.textContent);
     //alert(pElement.textContent);
     storeTwoItemInfo.style.display = "block";
     storeTwoItemHeader.textContent = pElement.textContent;
  }
}

Answer 3

Когда вызывается щелчком, контекст функции включает переменную с именем event, которая содержит информацию о событии щелчка, которое его вызвало. В частности, event.target даст вам элемент, по которому щелкнули.

function addToCart() {
  console.log(event.target);
}

<div class="storeMenuTwoItem" onclick="addToCart()">
  <img src="resources/img/si/SI_EmpireDesodorante.jpg" class="storeMenuBodyTwoImg" />
  <p class="storeMenuTwoBodyText">Empire Desodo.</p>
  <p class="storeMenuTwoBodyPrice">23 R$</p>
</div>
<div class="storeMenuTwoItem" onclick="addToCart()">
  <img src="resources/img/si/SI_EspumaBarbear.jpg" class="storeMenuBodyTwoImg" />
  <p class="storeMenuTwoBodyText">Espuma Barbear</p>
  <p class="storeMenuTwoBodyPrice">22 R$</p>
</div>
<div class="storeMenuTwoItem" onclick="addToCart()">
  <img src="resources/img/si/SI_ShampooAntCaspa.jpg" class="storeMenuBodyTwoImg" />
  <p class="storeMenuTwoBodyText">Shampoo AC</p>
  <p class="storeMenuTwoBodyPrice">33 R$</p>
</div>

Answer 4

querySelector ваш друг

 var div = document.querySelector('div.storeMenuTwoItem');
 var p= div.querySelector('p.storeMenuTwoBodyText');

Answer 5

Вы можете передать выбранный элемент div как this в атрибуте HTML:

<div class="storeMenuTwoItem" onclick="addToCart(this)">

Чем вы можете получить p с определенным классом из него с помощью функции querySelector:

function addToCart(element) {
    storeTwoItemInfo.style.display = "block";
    storeTwoItemHeader.textContent = element.querySelector('.storeMenuTwoBodyText').textContent;
}