jquery: div不打开id-9

Question

我给你发了详细的我的工作，当我点击链接1,2,3,4,5,6,7,8,9，然后我点击10，然后详细的DIV被隐藏，当我再添加一个链接时，当我输入ID 11时，它就转到了细节-Id1。我只想把身份证的1到100。

请参阅此链接：JSFIDDLE

这是JS代码：

jQuery('a[id^="prod"]').on('click', function (e) {
    var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
    }

    e.preventDefault()
});

Answer 1

使用var id = this.id.match(/\d+/); 从您的ID中获取数字

http://jsfiddle.net/hLd5W/21/

Answer 2

从第一眼看，我想说的问题是：

var id = $(this).attr('id').slice(-1);

您只得到id的最后一个数字，而不是整个数字。如果您将该行替换为以下内容：

var id = $(this).attr('id').replace('prod', '');

它可以与任意数量的数字一起工作，如以下所示：http://jsfiddle.net/hLd5W/20/

Answer 3

这是因为slice(-1)返回字符串的最后一个字符。不需要使用ids，您可以使用index和eq方法：

var $pd = $('.product-detail');
var $links = $('a[id^="prod"]').on('click', function (e) {
   var i = $links.index(this), $target = $pd.eq(i);

   $pd.not($target.toggle()).hide();

   e.preventDefault()
});

http://jsfiddle.net/rLh8G/