jQuery：div未展开到id-9。

Question

我向您发送有关我的工作的详细信息，当我单击链接1、2、3、4、5、6、7、8、9时，所有工作都正常，然后我单击10，则详细DIV会隐藏，当我添加一个更多的链接，也就是当我放置ID 11时，它会转到detail-id1。我只想将ID从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()
});

- scriptscale

Answer 1

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

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

- Roko C. Buljan

---

@scriptscale 当然可以。你试过了吗？只需要在HTML中放置一对100就可以尝试！ :) - Roko C. Buljan

Answer 2

从第一眼看，我会说问题在于：

。

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

你只获取了ID的最后一位数字，而不是整个数字。如果你将那行代码替换为像这样的内容：

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

它可以处理任意数量的数字，如下所示：http://jsfiddle.net/hLd5W/20/

- Alvaro Montoro

---

非常感谢。你的代码也起作用了 :) 但是@Roko先回答了。 - scriptscale

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/

- Ram

---

如果标题和描述不按顺序排列，此解决方案将失效。http://jsfiddle.net/rLh8G/1/ - Alvaro Montoro

@Monty82，我已根据现有的标记回答了这个问题。 - Ram