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（＆＃34;无论索引是什么＆＃34;）。我知道需要发生什么只是不确定语法是什么..我也在想我可以抓住哈希的值并将其转换为数值，所以如果＃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是一个正则表达式，用g替换所有\D个非数字字符的'' "#1"的出现次数（因此将其删除）。因此"1"-1变为0，即索引{{1}};

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');

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

2 个答案: