尝试根据当前 URL 中的当前字符串将类添加到属性 [英] Trying to add class to an attribute based on current string in current URL

查看：35
本文介绍了尝试根据当前 URL 中的当前字符串将类添加到属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我整个上午都在努力让它工作，但没有运气.

如果我执行以下代码:

 $('.persist-header a').each(function () {var $this = $(this);if (window.location.href.indexOf('signage') !== -1) {$this.addClass('active');}});

它将active2 类应用于.persist-header 下的所有href.

我希望它仅将其应用于一组中带有指示词(标牌)的 URL.

我尝试了各种组合，但都没有达到预期的效果.例如，这根本不返回任何内容:

 $('.persist-header a').each(function () {var $this = $(this);如果 ($this.attr('href').window.location.href.indexOf('signage') > -1) {$this.addClass('active');}});

jQuery 不是我的强项.任何您能负担得起的帮助将不胜感激.

提前致谢.

下面的第一个建议对我有用.但是第二个在所有链接上抛出活动"状态.所以我在下面提供我的 html:

 
<a class="cblNavMenu--link navBtn max menu-item zero active" href="path/imagetags/library/" role="button"><div class="cblNavMenu--link__content block"><div class="cblNavMenu--icon"><figure class="cblNavMenu--icon__imgwrap"><img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Library"/></图>
<span class="cblNavMenu--label">库</span>

</a><a class="cblNavMenu--link navBtn max menu-item one active" href="path/imagetags/this_that/" role="button"><div class="cblNavMenu--link__content block"><div class="cblNavMenu--icon"><figure class="cblNavMenu--icon__imgwrap"><img class="cblNavMenu--icon__img" src="path/image.jpg" alt="This & That"/></图>

<span class="cblNavMenu--label">This/That</span>

</a><a class="cblNavMenu--link navBtn max menu-item two active" href="path/imagetags/socialmedia/" role="button"><div class="cblNavMenu--link__content block"><div class="cblNavMenu--icon"><figure class="cblNavMenu--icon__imgwrap"><img class="cblNavMenu--icon__img" src="path/image.jpg" alt="社交媒体"/></图>

<span class="cblNavMenu--label">社交</span>

</a><a class="cblNavMenu--link navBtn max menu-item 3 active" href="path/imagetags/signage/" role="button"><div class="cblNavMenu--link__content block"><div class="cblNavMenu--icon"><figure class="cblNavMenu--icon__imgwrap"><img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Signage"/></图>

<span class="cblNavMenu--label">标牌</span>

</a><a class="cblNavMenu--link navBtn max menu-item 4 active" href="path/imagetags/properties/" role="button"><div class="cblNavMenu--link__content block"><div class="cblNavMenu--icon"><figure class="cblNavMenu--icon__imgwrap"><img class="cblNavMenu--icon__img" src="path/image.jpg" alt="属性"/></图>

<span class="cblNavMenu--label">属性</span>

</a>

解决方案

不要在第二个版本中使用window.location.href.

if ($this.attr('href').indexOf('signage') > -1)

你也可以把它放在选择器中并摆脱循环:

$('.persist-header a[href*=signage]').addClass('active');
.active {背景颜色:粉红色；红色;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="cblNavMenu--wrap static persist-header"><a class="cblNavMenu--link navBtn max menu-item zero" href="path/imagetags/library/" role="button"><div class="cblNavMenu--link__content block"><div class="cblNavMenu--icon"><figure class="cblNavMenu--icon__imgwrap"><img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Library"/></图>

<span class="cblNavMenu--label">库</span>

</a><a class="cblNavMenu--link navBtn max menu-item one" href="path/imagetags/this_that/" role="button"><div class="cblNavMenu--link__content block"><div class="cblNavMenu--icon"><figure class="cblNavMenu--icon__imgwrap"><img class="cblNavMenu--icon__img" src="path/image.jpg" alt="This & That"/></图>

<span class="cblNavMenu--label">This/That</span>

</a><a class="cblNavMenu--link navBtn max menu-item two" href="path/imagetags/socialmedia/" role="button"><div class="cblNavMenu--link__content block"><div class="cblNavMenu--icon"><figure class="cblNavMenu--icon__imgwrap"><img class="cblNavMenu--icon__img" src="path/image.jpg" alt="社交媒体"/></图>

<span class="cblNavMenu--label">社交</span>

</a><a class="cblNavMenu--link navBtn max menu-item 三" href="path/imagetags/signage/" role="button"><div class="cblNavMenu--link__content block"><div class="cblNavMenu--icon"><figure class="cblNavMenu--icon__imgwrap"><img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Signage"/></图>

<span class="cblNavMenu--label">标牌</span>

</a><a class="cblNavMenu--link navBtn max menu-item 四" href="path/imagetags/properties/" role="button"><div class="cblNavMenu--link__content block"><div class="cblNavMenu--icon"><figure class="cblNavMenu--icon__imgwrap"><img class="cblNavMenu--icon__img" src="path/image.jpg" alt="属性"/></图>

<span class="cblNavMenu--label">属性</span>

</a>

I've been trying to get this to work all morning, with no luck.

If I do the following code:

    $('.persist-header a').each(function () {
       var $this = $(this);
       if (window.location.href.indexOf('signage') !== -1) {
          $this.addClass('active');
       }
    });

It applies the active2 class to all a href's under .persist-header.

I want it to only apply it to the one URL in the bunch with the term indicated (signage) in it.

I've tried all sorts of combos, but none are achieving the desired effect. This, for instance, returns nothing at all:

    $('.persist-header a').each(function () {
       var $this = $(this);
       if ($this.attr('href').window.location.href.indexOf('signage') > -1) {
          $this.addClass('active');
       }
    });

jQuery is not my strong suit. Any help you can afford will be much appreciated.

Thanks in advance.

EDIT: The first suggestion below worked for me. But the 2nd throws an 'active' state on all of the links. So I'm providing my html below:

    <div class="cblNavMenu--wrap static persist-header ">
       <a class="cblNavMenu--link navBtn max menu-item zero active" href="path/imagetags/library/" role="button">
          <div class="cblNavMenu--link__content block">
             <div class="cblNavMenu--icon">
                <figure class="cblNavMenu--icon__imgwrap">
                   <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Library"/>
                </figure>
             </div>
             <span class="cblNavMenu--label">Library</span>
          </div>
       </a>

       <a class="cblNavMenu--link navBtn max menu-item one active" href="path/imagetags/this_that/" role="button">
          <div class="cblNavMenu--link__content block">
             <div class="cblNavMenu--icon">
                <figure class="cblNavMenu--icon__imgwrap">
                   <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="This &amp; That"/>
                </figure>
             </div>
             <span class="cblNavMenu--label">This/That</span>
          </div>
       </a>

       <a class="cblNavMenu--link navBtn max menu-item two active" href="path/imagetags/socialmedia/" role="button">
          <div class="cblNavMenu--link__content block">
             <div class="cblNavMenu--icon">
                <figure class="cblNavMenu--icon__imgwrap">
                   <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Social Media"/>
                </figure>
             </div>
             <span class="cblNavMenu--label">Social</span>
          </div>
       </a>

       <a class="cblNavMenu--link navBtn max menu-item three active" href="path/imagetags/signage/" role="button">
          <div class="cblNavMenu--link__content block">
             <div class="cblNavMenu--icon">
                <figure class="cblNavMenu--icon__imgwrap">
                   <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Signage"/>
                </figure>
             </div>
             <span class="cblNavMenu--label">Signage</span>
          </div>
       </a>

       <a class="cblNavMenu--link navBtn max menu-item four active" href="path/imagetags/properties/" role="button">
          <div class="cblNavMenu--link__content block">
             <div class="cblNavMenu--icon">
                <figure class="cblNavMenu--icon__imgwrap">
                   <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Properties"/>
                </figure>
             </div>
             <span class="cblNavMenu--label">Properties</span>
          </div>
       </a>
    </div>

解决方案

Don't use window.location.href in the second version.

if ($this.attr('href').indexOf('signage') > -1)

You can also put that in the selector and get rid of the loop:

$('.persist-header a[href*=signage]').addClass('active');

.active {
  background-color: pink;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cblNavMenu--wrap static persist-header">
  <a class="cblNavMenu--link navBtn max menu-item zero" href="path/imagetags/library/" role="button">
    <div class="cblNavMenu--link__content block">
      <div class="cblNavMenu--icon">
        <figure class="cblNavMenu--icon__imgwrap">
          <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Library" />
        </figure>
      </div>
      <span class="cblNavMenu--label">Library</span>
    </div>
  </a>

  <a class="cblNavMenu--link navBtn max menu-item one" href="path/imagetags/this_that/" role="button">
    <div class="cblNavMenu--link__content block">
      <div class="cblNavMenu--icon">
        <figure class="cblNavMenu--icon__imgwrap">
          <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="This &amp; That" />
        </figure>
      </div>
      <span class="cblNavMenu--label">This/That</span>
    </div>
  </a>

  <a class="cblNavMenu--link navBtn max menu-item two" href="path/imagetags/socialmedia/" role="button">
    <div class="cblNavMenu--link__content block">
      <div class="cblNavMenu--icon">
        <figure class="cblNavMenu--icon__imgwrap">
          <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Social Media" />
        </figure>
      </div>
      <span class="cblNavMenu--label">Social</span>
    </div>
  </a>

  <a class="cblNavMenu--link navBtn max menu-item three" href="path/imagetags/signage/" role="button">
    <div class="cblNavMenu--link__content block">
      <div class="cblNavMenu--icon">
        <figure class="cblNavMenu--icon__imgwrap">
          <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Signage" />
        </figure>
      </div>
      <span class="cblNavMenu--label">Signage</span>
    </div>
  </a>

  <a class="cblNavMenu--link navBtn max menu-item four" href="path/imagetags/properties/" role="button">
    <div class="cblNavMenu--link__content block">
      <div class="cblNavMenu--icon">
        <figure class="cblNavMenu--icon__imgwrap">
          <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Properties" />
        </figure>
      </div>
      <span class="cblNavMenu--label">Properties</span>
    </div>
  </a>
</div>

这篇关于尝试根据当前 URL 中的当前字符串将类添加到属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆