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

Targeting only one select in jquery not all of them

本文关键字：选择一个全部 jquery 更新时间：2023-09-26

在

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>

你应该试试：first选择器

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

请尝试以下操作

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

这与@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 的 .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);
    });
});

这是一个演示小提琴。