1

特定のアイテムが選択されたときにのみ表示する特定の div が必要です。

これまでの私の進捗状況は次のとおりです。

オプション 2 が選択されている場合、div5 が表示する必要がある HTML コメントが表示されますが、デフォルトでは、div5 は表示なしに設定されます。

すべての提案を歓迎します!

4

6 に答える 6

3

が選択されているかどうかを確認する条件を追加してからdata-target='2'明らか#div5にし、それ以外の場合は非表示にすることはできませんか?

このフィドルのように。

使用したコード:

if ($(this).data('target') == "2") {
    $("#div5").show();
} else {
    $("#div5").hide();
}
于 2012-08-23T23:51:13.090 に答える
3

ブール値をshowOrHide.toggle()に指定できるため、次のようにコードを変更して、表示と非表示を簡素化し、特別な条件に対応できます。

デモ

JavaScript

var $options = $('.showSingle');
var $targets = $('.targetDiv');

$('.showSingle').on('click', function () {
    $options.removeClass('selected');
    $targets.hide();

    $(this).addClass('selected');
    $('#div' + $(this).data('target')).show();

    $('#div5').toggle($(this).data('target') === 2);
});

$('.showSingle').first().click();

CSS

.targetDiv, #div5 {
    dislpay: none;
}
于 2012-08-24T00:00:01.237 に答える
3

あなたに必要なのは ：

$("#div5").toggle($(this).data('target')==2);

次のようになります。

$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
    $("#div5").toggle($(this).data('target')==2);
});

フィドル

于 2012-08-24T00:06:24.227 に答える
2

クリックアクションを使用してdiv5を表示することで実行できます

これは jsfiddleデモです

于 2012-08-23T23:52:22.320 に答える
2

http://jsfiddle.net/zerkms/SRQTv/1/

var target = $(this).data('target')
                    .toString()
                    .split(',')
                    .map(function(i) { return '#div' + i; })
                    .join(', ');

$(target).show();

この変更により、依存するコンマ区切りの div を次のように指定できるようになりました1,2,3

于 2012-08-23T23:52:42.113 に答える
2

別のオプションは、クラスを使用してアイテムを非表示/表示することです。class.displayNoneがあり、すべての div がそのクラスで始まるとします。選択した div に対してのみ削除する必要があります。

于 2012-08-23T23:53:07.150 に答える