Jquery，如果URL结尾的hashtag与类名匹配，则激活脚本 [英] Jquery, activate script if hashtag on end of URL matches a class name

问题描述

嗨伙计。当我选择不同的类别时，我正在使用一点jQuery来做一个活的排序。基本上，脚本将点击（我的菜单）上的< li> 标记的内容与其他< li> / code>标签页上的其他地方。结果是匹配导航点击的投资组合项目将显示并隐藏其余部分。现场排序。然而，我想添加一个能力来添加一个永久链接来激活jquery，最后通过hashtag进行排序..例如： work.html＃category1 会自动设置脚本隐藏一切，但第一类。我的脚本和基本页面设置如下。任何帮助将不胜感激！

 < script> 
 $（document）.ready（function（）{
 $（'＃worknavwrap p a'）。click（function（）{
 $（this）.css（'outline'， 'none'）; 
 $（'ul＃worknavwrap .current'）。removeClass（'current'）; 
 $（this）.parent（）。addClass（'current'）; 
 
 var filterVal = $（this）.text（）。toLowerCase（）。replace（''，'_'）; 
 
 if（filterVal =='all'）{
 $（'ul＃portfolio li.hidden'）。fadeIn（'slow'）。removeClass（'hidden'）; 
} else {
 
 $（'ul＃portfolio li'）。each（function（）{
 if（！$（this）.hasClass（filterVal））{
 $（this）.fadeOut（'normal'）.addClass（'hidden'） ; 
} else {
 $（this）.fadeIn（'slow'）。removeClass（'hidden'）; 
} 
}）; 
} 
 
返回false; 
}）; 
}）; 
< / script> 
< ul id =worknavwrap> 
< li>< a href =＃category1>类别1< / a>< / li> 
< li>< a href =＃category2>类别2< / a>< / li> 
< li>< a href =＃category3>类别3< / a>< / li> 
< / ul> 
< ul id =portfolio> 
< li class =category1>第1项< / li> 
< li class =category1>第2项< / li> 
< li class =category2>第3项< / li> 
< li class =category1>第4项< / li> 
< li class =category3>第5项< / li> 
< li class =category3>第6项< / li> 
< li class =category2>第7项< / li> 
< li class =category1>第8项< / li> 
< / ul> 
  

解决方案

执行此操作：

  if（window.location.hash）{
 $（'＃worknavwrap a [href ='+ window.location.hash +']'） 。点击（）; 
} 
  

它会找到< a> 元素，它具有匹配散列的 href 属性，并触发它的 .click（）处理程序。

更好的做法是为< a> 元素提供ID属性：

 < ul id =worknavwrap> 
< li>< a id =category1href =＃category1> Category 1< / a>< / li> 
< li>< a id =category2href =＃category2>类别2< / a>< / li> 
< li>< a id =category3href =＃category3>类别3< / a>< / li> 
< / ul> 
  

所以你可以这样做：

  if（window.location.hash）{
 $（window.location.hash）.click（）; 
} 
  

---

顺便提一下，您的代码与您的HTML匹配，您需要：

  $（'＃worknavwrap li a'）。click（function（）{ ... 
  

而不是：

<$ p $（$＃$）$（$＃$ $ $ $''$ $ $ $'$'$ $ $ $'

还有：

  var filterVal = $（this）.text（）。toLowerCase（）。替换（''，''）; 
  

而不是：

  var filterVal = $（this）.text（）。toLowerCase（）。replace（''，'_'）; 
  

Hey folks. I am using a little bit of jQuery to do a live sort of my portfolio when various categories are selected. Basically, the script matches the content of an <li> tag on click (my menu) with the class names of other <li> tags elsewhere on the page. The result is the portfolio items match the nav clicked will show and hide the rest. A live sort. However, i want to add the ability to add a permalink to activate the jquery to sort by a hashtag at the end.. for example: work.html#category1 would automatically set the script to hide everything but category one. My script and basic page setup is below. Any help would be greatly appreciated!

 <script>
    $(document).ready(function() {
        $('#worknavwrap p a').click(function() {
            $(this).css('outline','none');
            $('ul#worknavwrap .current').removeClass('current');
            $(this).parent().addClass('current');

            var filterVal = $(this).text().toLowerCase().replace(' ','_');

            if(filterVal == 'all') {
                $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
            } else {

                $('ul#portfolio li').each(function() {
                    if(!$(this).hasClass(filterVal)) {
                        $(this).fadeOut('normal').addClass('hidden');
                    } else {
                        $(this).fadeIn('slow').removeClass('hidden');
                    }
                });
            }

            return false;
        });
    });
    </script>
    <ul id="worknavwrap">
      <li><a href="#category1">Category 1</a></li>
      <li><a href="#category2">Category 2</a></li>
      <li><a href="#category3">Category 3</a></li>
    </ul>
    <ul id="portfolio">
      <li class="category1">Item 1</li>
      <li class="category1">Item 2</li>
      <li class="category2">Item 3</li>
      <li class="category1">Item 4</li>
      <li class="category3">Item 5</li>
      <li class="category3">Item 6</li>
      <li class="category2">Item 7</li>
      <li class="category1">Item 8</li>
    </ul>

解决方案

Do this:

if(window.location.hash) {
    $('#worknavwrap a[href=' + window.location.hash + ']').click();
}

It will find the <a> element that has the href attribute matching the hash, and trigger its .click() handler.

Even better would be to provide ID attributes for the <a> elements like:

<ul id="worknavwrap">
    <li><a id="category1" href="#category1">Category 1</a></li>
    <li><a id="category2" href="#category2">Category 2</a></li>
    <li><a id="category3" href="#category3">Category 3</a></li>
</ul>

So then you could just do:

if(window.location.hash) {
    $(window.location.hash).click();
}

---

By the way, for your code to match your HTML, you need:

$('#worknavwrap li a').click(function() {...

instead of:

$('#worknavwrap p a').click(function() {...

and also:

var filterVal = $(this).text().toLowerCase().replace(' ','');

instead of:

var filterVal = $(this).text().toLowerCase().replace(' ','_');

这篇关于Jquery，如果URL结尾的hashtag与类名匹配，则激活脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！