javascript - 检查某些 a-tags 的 href 属性是否与当前页面 URL 匹配(使用 jQuery)？

Question

如何检查某些 a-tags 的 href 属性是否与当前页面 URL 匹配(使用 jQuery)？我想删除所有指向同一页面的链接。这是我的代码的当前状态:

HTML:

<div id="faq">
  <h2 class="sectionheading">FAQ</h2>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
  <div class="accordion-group">
    <div class="accordion-heading">
      <strong itemprop="name">
       Question 1               
      </strong>
    </div>
    <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer" style="display: none;">
      <p>Answer 1 <a href="www.test.de/test.html"></a></p>                
    </div>
  </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
    <div class="accordion-group">
      <div class="accordion-heading">
        <strong itemprop="name">
          Question 2                
        </strong>
      </div>
      <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
        <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
      </div>
    </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
      <div class="accordion-group">
        <div class="accordion-heading">
          <strong itemprop="name">
            Question 3                
          </strong>
        </div>
        <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
          <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
        </div>
      </div>
  </div>
</div>

jQuery:

$('#faq accordion-body a').each(function(){
    var a_href = $(this).attr('href');
    if(a_href == $(location).attr('href')){
        $(this).preventDefault();
        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none'
        });
    }
});

它应该解决位于 accordion-body 中的所有 a 标签(有几个)。这些应该首先停用。然后调整样式(用.css())。

它不适用于我当前的代码。我做错了什么？

Answer 1

首先你在 $('#faq accordion-body a') 中遗漏了一个 .，它应该是 $('#faq .accordion-正文 a')

其次，您可以使用 a_href == window.location.href 来查看它是否与当前页面匹配。

$('#faq .accordion-body a').each(function(){
    var a_href = $(this).attr('href');
    if(a_href == window.location.href){
        $(this).click(function(e) {
          e.preventDefault();
        })
        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none'
        });
    }
});

演示

$('#faq .accordion-body a').each(function(){
    var a_href = $(this).attr('href');
    if(a_href == window.location.href){
        $(this).click(function(e) {
          e.preventDefault();
        })
        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none'
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faq">
  <h2 class="sectionheading">FAQ</h2>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
  <div class="accordion-group">
    <div class="accordion-heading">
      <strong itemprop="name">
       Question 1               
      </strong>
    </div>
    <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer" style="display: none;">
      <p>Answer 1 <a href="https://stacksnippets.net/js"></a></p>                
    </div>
  </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
    <div class="accordion-group">
      <div class="accordion-heading">
        <strong itemprop="name">
          Question 2                
        </strong>
      </div>
      <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
        <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
      </div>
    </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
      <div class="accordion-group">
        <div class="accordion-heading">
          <strong itemprop="name">
            Question 3                
          </strong>
        </div>
        <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
          <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
        </div>
      </div>
  </div>
</div>