Question

如果可以从一个样式开始具有各种样式，我怎么能显示/隐藏点击元素。我需要点击第一个子项目 - 显示第一项等等。

代码是这样的：

$('sub-item-' + (i + 1)).click ->
  $('item-' + (i + 1)).show()
  #coffeescript

<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
etc..

<a href="#" class="sub-item-1">Click 1</a>
<a href="#" class="sub-item-2">Click 2</a>
<a href="#" class="sub-item-3">Click 3</a>
<a href="#" class="sub-item-4">Click 4</a>
etc..

提前致谢！

Answer 1

我建议（在'普通'jQuery中）：

$('div[id^="item-"]').click(
    function(){
        $('a.' + this.id).toggle();
    });

参考文献：

attribute-starts-with ([attribute^="value"]) selector。

Answer 2

使用特定的示例，您可以使用attribute starts with selector，然后在单击的实际元素上解析类名。但我不会这样做，它很脆弱。（例如，假设您在class属性中添加了第二个类？这会使解析变得复杂，如果将它放在sub-item-*类之前，会使选择器陷入困境。）相反，我会可能要么使用其容器中项目的位置（如果可以），要么更改标记以使用data-*属性。

以下是一个示例，假设您的商品是其容器中唯一的商品：

Live example | source

<!-- (The 'items' are unchanged) -->    

<div><!-- the container, this div is just an example -->
    <a href="#" class="sub-item">Click 1</a>
    <a href="#" class="sub-item">Click 2</a>
    <a href="#" class="sub-item">Click 3</a>
    <a href="#" class="sub-item">Click 4</a>
</div>

然后，您可以使用index找出点击的div：

$(".sub-item").click(function() {
    var $this = $(this),
        index = $this.index() + 1;
    $(".item-" + index).show(); // Or toggle, whatever
    return false;
});

（您需要+ 1，因为index从零开始。）

但如果它们不是容器中唯一的东西，则可以使用data-*属性：

Live example | source

<!-- (The 'items' are unchanged) -->    

<div><!-- the container, this div is just an example -->
    <a href="#" class="sub-item" data-index="1">Click 1</a>
    <a href="#" class="sub-item" data-index="2">Click 2</a>
    <a href="#" class="sub-item" data-index="3">Click 3</a>
    <a href="#" class="sub-item" data-index="4">Click 4</a>
</div>

......这让事情变得非常简单：

$(".sub-item").click(function(e) {
    var $this = $(this),
        index = $this.attr("data-index");
    $(".item-" + index).show(); // Or toggle, etc.
    return false;
});

Answer 3

您可以使用此选择器选择以特定类名开头的所有锚标记

$('a[class^="sub-item-"]')

试试这个

$('a[class^="sub-item-"]').on('click', function(e) {
    e.preventDefault();

    var $parts = this.className.split('-');

    var $class  = $parts[1] + '-' + $parts[2];

    $('div').hide();

    $('.' + $class).show();
})

<强> Check FIDDLE

jquery i + 1显示/隐藏

3 个答案: