0

選択オプションで切り替えようとしています。2 つ以上を切り替えるのに苦労しています。私の目標は、選択オプションを介して 4 までトグルできるようにすることです。たとえば、カテゴリとサブカテゴリです。これがjsfiddleの私の例です。

<script type="text/javascript">
    var op = $("#tables option[value='options']:selected");
    var os = $("#tables option[value='Example2']:selected");
    if (op.length)
        $("#something").show();
    else
        $("#something").hide();
    if (op == ("#something").show())
             $("#something2").show();
    else
        $("#something2").hide();

}​
</script>
4

1 に答える 1

1

これはあなたが探しているデザインパターンですか？

if your object is not selected
    if your parent is selected
        you are also selected
    else
        you are selected
else
    you are now unselected

このロジックは、どの深さの再帰でも機能します。

編集：各メニューがULであると仮定します。セレクターを微調整する必要があります。これはそれを行うための1つの方法にすぎません。可視性でイベントが発生する場合、またはUIリフローの問題がある場合は最適ではありません。

clickyclicky = function(event) {
    var $target = $(event.currentTarget);
    if (!$target.hasClass("selected")) {
        // hide the old target and its parents
        var $oldTarget = $('.selected');
        $oldTarget.removeClass("selected").hide().parents('ul').hide();
        // show the new target and its parents
        $target.show().addClass("selected").parents('ul').show();
    } else {
        // hide the target
        $target.removeClass("selected").hide();
        // move the selected token to the parent.
        $parent = $target.parent().parent(); // assuming an ul/li tree pattern.
        if ($parent.is('ul')) {
            $parent.addClass("selected");
        }
    }
}

私はこのコードをテストしていません。これは単なる一般的なリファレンスです。

編集：これがフィドルです：http：//jsfiddle.net/uA7XD/76/

于 2012-05-23T19:55:00.587 に答える