是否可以获得 url 哈希的数字索引？

Question

所以我有一些有效的代码，但我知道这不是正确的方法。我知道必须有一个更简单的方法。

我有如下链接

<a href="#1">&nbsp;<strong class="active">1</strong></a>
<a href="#2">&nbsp;<strong class="active">2</strong></a>
<a href="#3">&nbsp;<strong class="active">3</strong></a>
<a href="#4">&nbsp;<strong class="active">4</strong></a>

这些链接中的每一个都激活标签内容，效果很好，所以没有问题。

我需要能够直接给人们一个链接来说出标签内容 3. 所以我想我可以使用 window.location.hash 所以我做了以下事情。

  if ( window.location.hash ==="#1") {
      jQuery(".slides").find('.dslc-modules-area').addClass('hide');
      jQuery(".slides").find('.dslc-modules-area').eq(0).addClass('show').removeClass('hide');
      jQuery( ".slidelinks li strong" ).removeClass('active');
      jQuery( ".slidelinks li strong" ).eq(0).addClass('active');
}
 else if( window.location.hash ==="#2"){
  jQuery(".slides").find('.dslc-modules-area').addClass('hide');
      jQuery(".slides").find('.dslc-modules-area').eq(1).addClass('show').removeClass('hide');
      jQuery( ".slidelinks li strong" ).removeClass('active');
      jQuery( ".slidelinks li strong" ).eq(1).addClass('active');
     }

 else if( window.location.hash ==="#3"){
  jQuery(".slides").find('.dslc-modules-area').addClass('hide');
      jQuery(".slides").find('.dslc-modules-area').eq(2).addClass('show').removeClass('hide');
      jQuery( ".slidelinks li strong" ).removeClass('active');
      jQuery( ".slidelinks li strong" ).eq(2).addClass('active');
     }
 else if( window.location.hash ==="#4"){
  jQuery(".slides").find('.dslc-modules-area').addClass('hide');
      jQuery(".slides").find('.dslc-modules-area').eq(3).addClass('show').removeClass('hide');
      jQuery( ".slidelinks li strong" ).removeClass('active');
      jQuery( ".slidelinks li strong" ).eq(3).addClass('active');
     }
 else if( window.location.hash ==="#5"){
  jQuery(".slides").find('.dslc-modules-area').addClass('hide');
      jQuery(".slides").find('.dslc-modules-area').eq(4).addClass('show').removeClass('hide');
      jQuery( ".slidelinks li strong" ).removeClass('active');
      jQuery( ".slidelinks li strong" ).eq(4).addClass('active');
     }
 else if( window.location.hash ==="#6"){
  jQuery(".slides").find('.dslc-modules-area').addClass('hide');
      jQuery(".slides").find('.dslc-modules-area').eq(5).addClass('show').removeClass('hide');
      jQuery( ".slidelinks li strong" ).removeClass('active');
      jQuery( ".slidelinks li strong" ).eq(5).addClass('active');
     }
 else if( window.location.hash ==="#7"){
  jQuery(".slides").find('.dslc-modules-area').addClass('hide');
      jQuery(".slides").find('.dslc-modules-area').eq(6).addClass('show').removeClass('hide');
      jQuery( ".slidelinks li strong" ).removeClass('active');
      jQuery( ".slidelinks li strong" ).eq(6).addClass('active');
     }
 else if( window.location.hash ==="#8"){
  jQuery(".slides").find('.dslc-modules-area').addClass('hide');
      jQuery(".slides").find('.dslc-modules-area').eq(7).addClass('show').removeClass('hide');
      jQuery( ".slidelinks li strong" ).removeClass('active');
      jQuery( ".slidelinks li strong" ).eq(7).addClass('active');
     }

这完全可以根据需要工作，但似乎太麻烦了。

有没有办法获取散列的 index() ？所以说如果它是＃2，或者＃3只使用索引然后我可以使用eq（“无论索引是什么”）。 我知道需要发生什么，只是不确定语法是什么。我还想我可以获取哈希值并将其转换为数值，所以如果 #2 我又可以在 eq() 中使用它

Answer 1

将所有您的代码替换为：

jQuery(function( $ ){ // DOM ready and $ alias secured

   // other DOM ready code here.........


   // Now, the 3 lines I promised earlier:
   var idx = window.location.hash.replace(/\D/g,'') - 1;
   $(".slides").find('.dslc-modules-area').addClass('hide').eq(idx).removeClass('hide');
   $(".slidelinks li strong").removeClass('active').eq(idx).addClass('active');



});

另外，你的逻辑很奇怪。您不需要两个类.hide 和.show。只有一个。想一想。

回顾一下，要获取索引0..n，您可以使用window.location.hash.replace(/\D/g,'') - 1;，其中/\D/g 是一个正则表达式，它将globally 所有出现的\D 非数字字符替换为''（因此它会删除它们）。所以"#1" 变为"1"-1 即索引0;

Answer 2

要将 url 位置哈希解析为数字，切掉第一个字符，然后使用一元 + 或 parseInt 解析/强制为 int。

var hash = "#5";
var num = +hash.slice(1); // or parseInt(hash.slice(1), 10)

console.log(num);

然后你可以概括你的代码（别忘了你可以链接语句）：

var hashNum = window.location.hash.slice(1) - 1;
jQuery(".slides .dslc-modules-area")
    .addClass('hide')
    .eq(hashNum).addClass('show').removeClass('hide');
jQuery(".slidelinks li strong")
    .removeClass('active')
    .eq(hashNum).addClass('active');