0

このトグル内に表示/非表示を埋め込んでトリガーしようとしています。

$(document).ready(function() {

$(function() {
$('#toggle1').click(function () {
    $('.toggle').hide('1000');
    $('.toggle').html('I would like to show a new div within this toggle'); 
$('.toggle').slideToggle('1000');

return false; 
    });
});

トグル内のトグルのようなものです。

全体像、そして最終的には; 小さなゲームを作成する複数の埋め込みとインスタンス内でこれを実行しようとしています-そして、最も軽くて最適なソリューションを探しています。

これをクリック > これがトリガー > その DIV 内で色をクリック > BOOM!

それがドリフトです。

私は理にかなった解決策を探しています。

ここに画像の説明を入力

4

1 に答える 1

1

コンテンツの重複を避けるために、要素を整理してみてください。HTML を次のように構成できます。

<div class="wrapper">
    <!-- Select item -->
    <div class="select_item">
        <ul class="item_list">
            <li class="item active" data-item-id="1"><img class="item_thumb" src="1.jpg"></li>
            <li class="item" data-item-id="2"><img class="item_thumb" src="2.jpg"></li>
            <li class="item" data-item-id="3"><img class="item_thumb" src="3.jpg"></li>
        </ul>
    </div>
    <!-- Select color -->
    <div class="select_color">
        <ul class="color_list">
            <li class="color active" data-color-id="1"><span class="color_thumb"><!-- Color --></span></li>
            <li class="color" data-color-id="2"><span class="color_thumb"><!-- Color --></span></li>
            <li class="color" data-color-id="3"><span class="color_thumb"><!-- Color --></span></li>
            <li class="color" data-color-id="4"><span class="color_thumb"><!-- Color --></span></li>
            <li class="color" data-color-id="5"><span class="color_thumb"><!-- Color --></span></li>
        </ul>
    </div>
</div>

次のような選択動作を実現します。

function getSelection() {
    var selection = { };
        selection['item_id'] = parseInt($('.item.active').attr('data-item-id'));
        selection['color_id'] = parseInt($('.color.active').attr('data-color-id'));
    return selection;
}

$(document).ready(function() {
    //Update the current item
    $('.item_thumb').on('click', function(e) {
        $('.item').removeClass('active');
        $(e.currentItem).parent().addClass('active');
    });
    //Update the current color
    $('.color_thumb').on('click', function(e) {
        $('.color').removeClass('active');
        $(e.currentItem).parent().addClass('active');
    });
});

これは、すべての親アイテムが色を選択する必要があることを前提としています (つまり、同じタイプのオプション)。ルート アイテムごとに異なるオプション タイプ (色、サイズなど) が必要な場合は、アイテム コンテナー内で各アイテムのオプションをネストしてみてください。

<div class="wrapper">
    <!-- Contains all items with options -->
    <ul class="items">
        <!-- Item 1, has a color option -->
        <li class="item active" data-item-id="1">
            <div class="item_thumb"><img src="item1.jpg"></div>
            <ul class="options">
                <li class="option active" data-option-id="1"><span class="color_thumb"><!-- Color --></span></li>
                <li class="option" data-option-id="2"><span class="color_thumb"><!-- Color --></span></li>
                <li class="option" data-option-id="3"><span class="color_thumb"><!-- Color --></span></li>
            </ul>
        </li>
        <!-- Item 2, has a size option -->
        <li class="item" data-item-id="2">
            <div class="item_thumb"><img src="item2.jpg"></div>
            <ul class="options">
                <li class="option active" data-option-id="1"><span class="size_label">Small</span></li>
                <li class="option" data-option-id="2"><span class="size_label">Medium</span></li>
                <li class="option" data-option-id="3"><span class="size_label">Large</span></li>
            </ul>
        </li>
    </ul>
</div>

次のような選択動作を実現します。

function getSelection() {
    var current_item = $('.item.active');
    var selection = { };
        selection['item_id'] = parseInt(current_item.attr('data-item-id'));
        selection['item_option'] = current_item.find('.option.active').attr('data-option-id');
    return selection;
}

オプションの深さ (オプション -> サブオプション -> サブサブオプション) によっては、ページがさらに複雑になる可能性があり、ケース固有のコードが必要になる場合があります。あなたの正確な要件 (または「トグル」の意味) はわかりませんが、これは正しい方向に進むのに役立つかもしれません。

于 2013-11-09T01:26:23.293 に答える