Javascript 使用jQuery从html元素中提取文本

我正在使用Express，并在页面中添加了一些产品，其中有一个

for..in

循环

          <div class="row" id="productList">
            <% for(let item in product) { %>
              <div class="card">
                <img src="<%= product[item].image %>" class="card-img-top" alt="...">
                <h3 class="card-title">
                  <%= product[item].name %>
                </h3>
                <p class="card-text">
                  <%= product[item].description %>
                </p>
                <div class="card-footer">
                  <p>
                    <%= product[item].price_cents %>
                  </p>
                  <a href="#"><i class="fas fa-cart-plus add-burg-event"></i></a>
                </div>
              </div>
              <% } %>
          </div>

到目前为止还不错。我的问题是上面的console.log正在打印以下内容：

<div class=“card”>
      <img src=“images/01_CheeseBurger.jpeg” class=“card-img-top” alt=“...“>
      <h3 class=“card-title”>
        Cheese Burger
      </h3>
      <p class=“card-text”>
        Angus Beef, Letuce, Tomato, Cheese
      </p>
      <div class=“card-footer”>
      <p>
        600
      </p>
      <a href=“#”><i class=“fas fa-cart-plus add-burg-event”></i></a>
     </div>
  </div>

奶酪汉堡

安格斯牛肉、莱图塞、番茄、奶酪


600

---

如何访问或提取奶酪汉堡的

内容，以便将其保存到变量中，而不是整个父元素中？我尝试了一些使用.contents、.text和.find的方法，但尚未成功。谢谢你的帮助

进入

.card

后，首先导航到子标题：

$('.add-burg-event').on('click', function(e) {
  e.preventDefault();
  const h3 = $(this).closest('.card').find('.card-title');
  console.log(h3.text());
});

---

记住用

$

包围

这个
，这样你就可以使用jQuery方法了-如果你只是这样做的话。最近（…）
，你是在使用原生DOM元素和方法，而不是jQuery。（它们都有一个
.closest
方法）
我会用不同的方法，使用HTML5
数据属性
将数据点存储在可点击的项目本身上-这样在点击时-你不需要访问父.card来解析信息的文本

注意
元素上添加的数据属性-顺便说一句-我可能会使用
元素来实现这一点-因为您并没有在任何地方导航，而是使用event.preventDefault（）方法来阻止元素的正常操作。我还将类移动到按钮上，因为这是clcick hander应该打开的，而不是按钮中的图标

      <div class="row" id="productList">
        <% for(let item in product) { %>
          <div class="card">
            <img src="<%= product[item].image %>" class="card-img-top" alt="...">
            <h3 class="card-title">
              <%= product[item].name %>
            </h3>
            <p class="card-text">
              <%= product[item].description %>
            </p>
            <div class="card-footer">
              <p>
                <%= product[item].price_cents %>
              </p>
              <button 
                class="add-burg-event"
                data-name="<%= product[item].name %>"
                data-description="<%= product[item].description%>"
                data-price="<%= product[item].price%>"
              >
                 <i class="fas fa-cart-plus"></i>
              </button>
            </div>
          </div>
          <% } %>
      </div>

      <div class="row" id="productList">
        <% for(let item in product) { %>
          <div class="card">
            <img src="<%= product[item].image %>" class="card-img-top" alt="...">
            <h3 class="card-title">
              <%= product[item].name %>
            </h3>
            <p class="card-text">
              <%= product[item].description %>
            </p>
            <div class="card-footer">
              <p>
                <%= product[item].price_cents %>
              </p>
              <button 
                class="add-burg-event"
                data-name="<%= product[item].name %>"
                data-description="<%= product[item].description%>"
                data-price="<%= product[item].price%>"
              >
                 <i class="fas fa-cart-plus"></i>
              </button>
            </div>
          </div>
          <% } %>
      </div>

<div class=“card”>
      <img src=“images/01_CheeseBurger.jpeg” class=“card-img-top” alt=“...“>
      <h3 class=“card-title”>
        Cheese Burger
      </h3>
      <p class=“card-text”>
        Angus Beef, Letuce, Tomato, Cheese
      </p>
      <div class=“card-footer”>
      <p>
        600
      </p>
      <button 
         class="add-burg-event"
         data-name ="Cheese Burger"
         data-description="Angus Beef, Letuce, Tomato, Cheese"
         data-price="600"
       >
         <i class=“fas fa-cart-plus”></i>
       </button>
     </div>
  </div>

$(document).ready(function () {
  $('.add-burg-event').on('click', function() {
    const name = $(this).attr('data-name');
    const description= $(this).attr('data-description');
    const price= $(this).attr('data-price');
    console.log(name); // will give "Cheese Burger"
  });
});