javascript - 在jquery中只针对一个选择而不是全部

Question

在 jquery 中仅针对一个切换（选择后的下一个 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>

Answer 1

您可以使用 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);
    });
});

这是一个演示小提琴。

Answer 2

您应该尝试 :first 选择器

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

Answer 3

这类似于@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);
    });
});

Answer 4

尝试关注

$( ".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);
  });
});