javascript - 单击父级时如何获取子级名称

Question

我有很多这样的搜索结果：

<div id="product-button">
    <p id="product-id">id</p>
    <p id="product-name">name</p>
</div>
<div id="product-button">
    <p id="product-id">id</p>
    <p id="product-name">name</p>
</div>

etc etc

我需要获取单击的产品名称和 ID 的文本

我关闭但<empty string>在控制台中打印：`

$(document).on('click', '#product-button', function(){

  console.log($(this).closest('#product-button').children('#product-name').text());

});

标签： javascriptjqueryhtml

Answer 1

元素的 id 必须是唯一的。用类替换它们。

<div class="product-button">
    <p class="product-id">id_1</p>
    <p class="product-name">name_1</p>
</div>
<div class="product-button">
    <p class="product-id">id_2</p>
    <p class="product-name">name_2</p>
</div>

$(this) is ('#product-button') 所以不需要它：

$(document).on('click', '.product-button', function(){

  console.log($(this).children('.product-name').text());

});

$(document).on('click', '.product-button', function(){

  console.log(`${$(this).children('.product-name').text()} ${$(this).children('.product-id').text()}`);

});

<div class="product-button">
    <p class="product-id">id_1</p>
    <p class="product-name">name_1</p>
</div>
<div class="product-button">
    <p class="product-id">id_2</p>
    <p class="product-name">name_2</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>