Question

我有6张用于我们网站的推荐信。如果想阅读整个故事，这些卡片包括一些信息和一个“阅读更多”按钮。该卡确实展开了，但是我希望它关闭其他卡。

我尝试了.not元素，但找不到放置它的地方，它似乎不起作用

$j=jQuery.noConflict();

jQuery('.readmore').click(function(){  
  jQuery(this).parent().addClass('uitgeklapt');
  jQuery(this).parent().not(this).addClass('weg');
});

.uitgeklapt {
  width:100%;
  height:530px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cart left">
  <img class="image" src="https://checkbuster.com/wp-content/uploads/2019/08/BA-Group-1.png">
  <p class="tekst">Lorem ipsum dolor sit amet, consetetur</p>
  <p class="readmore">Read more</p>
  <p class="sluiten">Close</p>
</div>

我希望当一个人按下“阅读更多”时，它会向另一个div添加一个类，并显示“不显示”。

编辑：

我已添加

jQuery('.readmore').click(function(){  
  jQuery(this).parent().addClass('uitgeklapt');
  jQuery(".cart").not($(this).parent()).addClass('weg');
  });

但是，它不会给其他卡片提供“ weg”类

Answer 1

非常简单：

var $myOwnCart = $(this).closest(".cart");
$(".cart").not($myOwnCart);

https://api.jquery.com/closest/

这也可以：

$(".cart").not($(this).parent());

但是与.closest()相比，我更喜欢.parent()，因为前者不会因为某些原因向HTML添加<div>级别而停止工作。

Answer 2

$(function(){
  jQuery('.readmore').click(function(){  
  jQuery(this).parent().addClass('uitgeklapt').not(this).addClass('weg');
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="cart left">
  <div class="group">
  <img class="image" src="https://checkbuster.com/wp-content/uploads/2019/08/BA-Group-1.png" width='40' height='40'>
  <p class="tekst">Lorem ipsum dolor sit amet, consetetur</p>
  <p class="readmore">Read more</p>
  <p class="sluiten">Close</p>
  </div>
  <div class="group">
  <img class="image" src="https://checkbuster.com/wp-content/uploads/2019/08/BA-Group-1.png" width='40' height='40'>
  <p class="tekst">Lorem ipsum dolor sit amet, consetetur</p>
  <p class="readmore">Read more</p>
  <p class="sluiten">Close</p>
  </div>
</div>

怎么做：“选择除此元素以外的所有其他元素”

2 个答案: