0

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

代码是这样的：

$('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..

提前致谢！

4

3 回答 3

1

我建议（在“普通”jQuery 中）：

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

参考：

于 2012-10-15T08:32:42.003 回答
1

对于您的具体示例，您可以使用以 selector 开头的属性，然后解析被单击的实际元素上的类名。但我不会那样做，它很脆弱。（例如，假设您在class属性中添加了第二个类？这会使解析复杂化，并且如果您将其放在sub-item-*类之前，则会弄乱选择器。）相反，我可能会使用该项目在其中的位置容器（如果可以的话），或者更改标记以使用data-*属性。

这是一个示例，假设您的项目是其容器中唯一的东西：

实例| 来源

<!-- (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-*属性：

实例| 来源

<!-- (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;
});
于 2012-10-15T08:33:00.967 回答
1

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

$('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();
})​

检查小提琴

于 2012-10-15T08:34:23.883 回答