如何覆盖 class 的 CSS 规则，其数据属性值与锚标记的值匹配？

Question

我正在尝试向 WordPress 页面的不同部分添加阅读更多链接，单击该链接时，默认情况下会显示隐藏在 CSS 中的内容。 以下是 HTML 格式的几个部分。 我需要创建多个类似的部分。

第 1 节：

<p>What kinds of gifts should you give employees? <a class="more-link-pwp" href="#" data-more-link-id="1">Read More.</a></p>
<div class="more-content-pwp" data-more-content-id="1">How much should you spend? Should corporate gifts for employees be company-branded? Our expert team will help you choose memorable, unique gifts for your employees and office staff.</div>

第 2 节：

<p> Deepen employee engagement and impress new hires while giving employee gifts that are meaningful and memorable. <a class="more-link-pwp" href="#" data-more-link-id="2">Read More.</a></p>
<div class="more-content-pwp" data-more-content-id="2">From empowering underserved women with job skills to supporting sustainability efforts every gift creates an impact. Our Impact Booklet showcases these inspiring stories, providing a unique experience for gift recipients.</div>
<p>&nbsp;</p>

由于这两个部分使用相同的类，我向每个部分添加了 data-more-link-id="1" 和 data-more-content-id="1" 以针对特定部分。 下面是我写的jQuery代码，哪里不对。 你能帮我修一下吗？

$('.more-link-pwp').click(function() {
  // get data-more-link-id
  var dataMorelinkid = $(this).attr("data-more-link-id");
  // get data-more-content-id 
  var dataMorecontentid = = $(.more-content-pwp).attr("data-more-content-id");
 
  // Iterate through dataMorecontentid.
  for (let i = 0; i < dataMorecontentid.length; i++) {
   if (dataMorecontentid[i] == dataMorelinkid) {
   // Change CSS for the classes whose data-more-content-id matches data-more-link-id.
      $('.more-content-pwp').css('display', 'block');
      $(this).css('display', 'none');
      return false;
   }
});

CSS：.more .more-content-pwp {display: none;}

我想要实现的是，每当单击阅读更多链接时，只应显示特定于该更多链接的隐藏内容，而不是使用相同 class 的其他部分的内容。

Answer 1

 $('.more-link-pwp').click(function() { // get data-more-link-id var dataMorelinkid = $(this).attr("data-more-link-id"); $(this).hide(); // update 1 $(".more-content-pwp").each(function(){ // $(this).hide(); // update 2 const id = $(this).attr('data-more-content-id'); if(id == dataMorelinkid){ $(this).show(); } }); });

 .more-content-pwp{ display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>What kinds of gifts should you give employees? <a class="more-link-pwp" href="#" data-more-link-id="1">Read More.</a></p> <div class="more-content-pwp" data-more-content-id="1">How much should you spend? Should corporate gifts for employees be company-branded? Our expert team will help you choose memorable, unique gifts for your employees and office staff.</div> <p> Deepen employee engagement and impress new hires while giving employee gifts that are meaningful and memorable. <a class="more-link-pwp" href="#" data-more-link-id="2">Read More.</a></p> <div class="more-content-pwp" data-more-content-id="2">From empowering underserved women with job skills to supporting sustainability efforts every gift creates an impact. Our Impact Booklet showcases these inspiring stories, providing a unique experience for gift recipients.</div> <p>&nbsp;</p>

下面的行将 output 是一个字符串而不是数组。

var dataMorecontentid = = $(.more-content-pwp).attr("data-more-content-id");

下面的代码有效。