主页 / 问题 / 1052841
Accepted
Даша Новикова
Asked:2020-12-01 14:37:25 +0000 UTC2020-12-01 14:37:25 +0000 UTC

如何引用另一个类中的类

  • 772

早上好！）请告诉我，我在几个块中使用了 .product__item，如何在 js 中指定只需要添加具有父 .product-page-items 的那个？

这是html结构：

在此处输入图像描述

我的js：

$('.icon-th-list').on('click', function(){   

if ($(this).parent('.product-page-items')) {

    $('.product__item').addClass('list');

}

});

但它为所有包含 product_item 类的块添加了一个类

javascript

1 个回答

  1. Best Answer

    这不起作用有两个原因......$(this)它是触发功能的元素（被点击）。.parent("селектор")- 如果匹配选择器，则返回父元素，如果父元素不匹配，则返回元素本身。在任何情况下，它在逻辑上下文中都是正确的。

    但是，即使您设法正确过滤了具有正确父级的块，您仍然可以将该类添加到每个人：$('.product__item').addClass('list');

    可以检查每个块的父级，但是有简单的 CSS 选择器：
    • .class1 .class2- 空格分隔，意味着第二个可以在第一个内部的任何位置，
    • .class1 > .class2- 只有那些直接在 class1 的子元素中的 class2 . 最常用的选项是空格，因为。如果您想在将来更改标记，则必须重做这个。

    $('.icon-th-list').on('click', function() {
  $('.product-page-items .product__item').addClass('list');
});
    .list { color: red; }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="icon-th-list">.......</button>

<div class="product-page-items">
  <div class="product__item">Покрасить</div>
</div>

<div>
  <div class="product__item">Не покрасить</div>
</div>

    对父母的“手动”检查如下所示：

    $('.icon-th-list').on('click', function() {
  // Функция вызывается в контексте $('.icon-th-list'). Здесь $(this) — '.icon-th-list'

  $('.product__item').each(function(){
    // У этой функции контекст вызова другой: 
    // Здесь $(this) - очередной '.product__item' внутри каждой проверки.

    if( $(this).closest('.product-page-items').length > 0 ){ 
     // можно без > 0 — любое число кроме 0, в логическом контексте будет true
     // $(this).parent().hasClass('.product-page-items')
      $(this).addClass('list');
    }
  });
});
    .list { color: red; }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="icon-th-list">.......</button>

<div class="product-page-items">
  <div class="product__item">Покрасить</div>
</div>

<div>
  <div class="product__item">Не покрасить</div>
</div>

    • 2

相关问题