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);
    });
});

这是Demo Fiddle。

Answer 2

你应该尝试：第一个选择器

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

Answer 3

尝试以下

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

Answer 4

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

仅针对jquery中的一个选择而不是所有选择

4 个答案: