0

1 つから始まるさまざまなスタイルを持つことができる場合、クリック時に要素を表示/非表示にするにはどうすればよいですか。最初のアイテムなどを表示するには、最初のサブアイテムをクリックする必要があります。

コードは次のようになります。

$('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属性に2番目のクラスを追加したとしましょう。これにより、解析が複雑になり、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 に答える