在单击时选择特定项目，但不是所有具有相同类别的项目

Question

我正在尝试仅对单击的项目执行操作，但当前结果是对页面上的所有项执行操作。因此，我只想选择具体的＆＃34; product_image＆＃34;我点击了，而不是每个＆＃34; product_image＆＃34;。

$('.product_image').on('click', function() {
    $('.description').toggleClass('show-description');
  });

Answer 1

仅在单击的项目上运行的键或与所单击的项目在HTML的同一分支中的某些键，它在单击处理程序中使用$(this)作为选择器的基础。

1. 如果要定位单击自身的元素，则使用$(this)获取该元素的jQuery对象。

2. 如果您要定位的内容是所点击的项目的子项，则可以使用$(this).find("selector")查找相关的子项。

3. 如果你想要定位的是同一个分支，而不是直接的孩子，那么你可以使用$(this).closet("common parent selector")前往普通父母，然后.find()从那里找到您希望定位的项目。

假设您想要的.description元素在product_image项内，那么您可以这样做：

$('.product_image').on('click', function() {
    $(this).find('.description').toggleClass('show-description');
});

或者，有时他们有一个共同的父母，你做这样的事情：

$('.product_image').on('click', function() {
    $(this).closest("common parent selector").find('.description').toggleClass('show-description');
});

如果您在问题中添加相关的HTML，我们可以提供更具体的建议。