检查某些a-tags的href属性是否匹配当前页面URL（withjQuery）？

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 中的标签都应该被寻址（有几个）。这些应该首先停用。然后应该调整样式（用 .css ()).

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

Answer 1

首先您在 $('#faq accordion-body a') 中缺少一个 .，它应该是 $('#faq .accordion-body 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>

Answer 2

添加到 Carsten 的回复中，您可以通过执行以下操作对其进行一些优化

$('#faq .accordion-body a[href="'+window.location.href+'"]').each(function(){
        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none',
            'pointer-events' : 'none'
        });
    }
);

这使它更简洁一点，也更快一点。

Answer 3

<a> 代码中的标签没有超文本 <a href="www.test.de/test.html"></a> 尝试添加一些 link 文本以查看下面的代码。一旦两个 url 的条件匹配，那么你必须为当前 a 标签绑定一个没有默认操作的点击事件（preventDefault() 这样做），所以稍后当你点击那个 link它不会显示默认行为。

$(document).ready(function(){

  $('#faq').find('.accordion-body a').each(function(i,j){
    var a_href = $(this).attr('href');

    if(a_href == $(location).attr('href')){

        $(this).on('click', function(event){
                event.preventDefault();
           });

        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none'
        });
    }

    });

});

检查某些a-tags的href属性是否匹配当前页面URL（withjQuery）？

Check if the href attribute of certain a-tags matches the current page URL (with jQuery)?

html

javascript

css

jquery

preventdefault