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

Question

我正在尝试将 阅读更多内容 link 添加到 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>

由于这两个部分使用相同的 classes，我向每个部分添加了 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-content-pwp {display: none;}

我想要实现的是，每当单击阅读更多 link 时，只应显示特定于该更多 link 的隐藏内容，而不是其他部分使用的内容同样的 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>

下一行将输出字符串而不是数组。

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

下面的代码有效。

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

How to override a CSS rule for a class whose data-attribute value matches with that of an anchor tag?

html

javascript

css

jquery

frontend