0

jqueryのすべてではなく、1つのトグル(選択後の次のdiv)のみをターゲットにする

これは、その下にあるものだけを表示したいときにすべてのトグルを表示することを除いて機能します。

htmlはこちら

$( ".toggle" ).hide();
$(function () {
  $(".binary").change(function() {
    if ($(this).val() == "0"){
      $( ".toggle" ).hide();
    } else {
      $( ".toggle" ).show();
    }
    $("#pane").customScrollbar("resize", true);
  });
});

htmlはこちら

                    <div class="option checkbox">
                        <label class="field_wrap">
                            <div class="label">1</div>
                            <div class="field">
                                <select class="binary" name="option_1">
                                    <option value="0"></option>
                                    <option value="1"></option>
                                </select>
                            </div>
                        </label>
                    </div>
                    <div class="toggle">
                    toggle 1
                    </div>
                    <div class="option checkbox">
                        <label class="field_wrap">
                            <div class="label">1</div>
                            <div class="field">
                                <select class="binary" name="option_1">
                                    <option value="0"></option>
                                    <option value="1"></option>
                                </select>
                            </div>
                        </label>
                    </div>
                    <div class="toggle">
                    toggle 2
                    </div>
4

4 に答える 4

0

これは @Ganesh の回答に似ていますが、具体性が高く、シナリオで重要になる可能性があります。

$(".toggle").hide();

$(function () {
    $(".binary").change(function () {
        if ($(this).val() == "0") {
            console.log($(this).closest('div.option.checkbox').length);
            $(this).closest('div.option.checkbox').next(".toggle").hide();
        } else {
            $(this).closest('div.option.checkbox').next(".toggle").show();
        }
        $("#pane").customScrollbar("resize", true);
    });
});
于 2013-10-25T06:43:50.683 に答える
0

フォローしてみてください

$( ".toggle" ).hide();
$(function () {
  $(".binary").change(function() {
    if ($(this).val() == "0"){
      $(this).parent().parent().parent().next().hide();
    } else {
      $(this).parent().parent().parent().next().show();
    }
    $("#pane").customScrollbar("resize", true);
  });
});
于 2013-10-25T06:31:19.990 に答える
0

jQuery の.next()メソッドを使用できます。

$(function () {
    $(".binary").change(function() {
        if($(this).val() == 0){
            $(this).parents("div.checkbox").next('.toggle').hide();
        } else {
            $(this).parents("div.checkbox").next('.toggle').show();
        }
        $("#pane").customScrollbar("resize", true);
    });
});

これがデモ Fiddleです。

于 2013-10-25T06:16:15.307 に答える