как получить текст внутри динамически отображаемых элементов одним нажатием кнопки?

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я отображаю содержимое после его извлечения через ajax с использованием jquery, поэтому содержимое является динамическим,

 var i, j;
var product_names = [];
var product_image = [];
var product_rate = [];
var product_amount = [];
var product_category = [];
$.ajax({
    url: BASE_URL   '/getOrgServices?orgId='   orgId,
    type: 'GET',
    success: function(result) {
        //console.log(result);
        for (i in result) {
            product_names[i] = result[i].name;
            product_image[i] = result[i].imgurl;
            product_rate[i] = result[i].rate;
            product_amount[i] = result[i].amount;
            product_category[i] = result[i].categories;
        }

for(i in product_category){
                var html = '<div class="prod-content"><ul id="products">';
                html  = '<li class="row product-listing">';
                html  = '<div class="product-img-container"><img class="product-img" src="'   product_image[i]   '"></div>';
                html  = '<div class="container product-listing-details"><h6 id="product-title">'   product_names[i]   '</h6><div id="product-description">'   product_amount[i]   '</div><br><div id="product-cost">'   product_rate[i]   '</div></div>';
                html  = '<div id="product-add">';
                html  = '<button class="add-button" type="button" role="button">ADD</button>';
                html  = '<span class="quantity"><input class="item-quantity" type="number" value="0" min="0" max="50" step="1"></span>';
                html  = '</div></li> </ul></div>'
            
                //adding elements to all category
                var id_str = '#'   new_id[0];
                $(id_str).append(html);
 }

}
  

Теперь в приведенной ниже функции я хочу получить доступ к имени одного h6 product_name за раз, так есть ли какой-либо способ сделать это, например, если бы я мог выбрать

 $(".add-button").click(function() {
        //here i want to add items to cart on button click (means the button clicked its corresponding item should be added to cart )
   });
  

является ли корзина частью HTML-кода

   <div class="order">
      <ul id="products">
       <li>
          //here i want to append the added item
       </li>
     </ul>
   </div>
  

Комментарии:

1. идентификатор должен быть уникальным. Вы запускаете цикл и создаете файл с тем же идентификатором, что неверно. То же самое касается h6, isd должен быть уникальным.

Ответ №1:

Чтобы получить все h6, вы можете сделать то же самое, что показано ниже, без jQuery.

 $(".add-button").click(function() {
  console.log("click");
  document.querySelectorAll("div.prod-content h6").forEach((function(elem) {
    console.log(elem.innerText);
    if (parseInt(elem.innerText) > 0) {
      console.log(elem);
    }
  }));
});  

Комментарии:

1. но я хочу получить product_name одного конкретного элемента, а не всего списка.

2. на самом деле я пытаюсь показать выбранные элементы в разделе корзины, поэтому мне нужно только название этого конкретного элемента

3. Это нормально, вы можете сравнить if(parseInt(elem.textContent)>0){ console.log(elem)})

4. постараюсь сообщить вам, сэр

5. нет, это не сработало, он не может получить имя текущего элемента, для которого нажата кнопка