缓存事件的变量而不使其全局化

Caching variables for events without making them global

本文关键字：全局 事件 变量 缓存      更新时间：2023-09-26

可以说这适用于大多数事件，但在我的情况下，选择框的change事件。我有两个选择框。我想根据选择框中的选项插入/重新插入，具体取决于在第一个选择框中选择的选项。我已经设法做到了这一点，但需要注意的是，为我想要操纵的选项创建一个全局变量。有没有办法在事件中做到这一点，或者在变量不是全局的情况下有某种变通方法？

HTML

<select id="vehicles">
  <option value="motorcycle">Motorcycle</option>
  <option value="bicycle">Bicycle</option>
  <option value="unicycle">Unicycle</option>
</select>
<select id="speeds">
  <option class="remove" value="four">Four Speed</option>
  <option class="remove" value="three">Three Speed</option>
  <option class="remove" value="two">Two Speed</option>
  <option value="one">One Speed</option>
</select>

JS

$(function() {
  var options =  $(".remove");
  $("#vehicles").on("change", function() {
    if ($("option:selected").attr("value") == "unicycle") {
      options.detach();
    } else {
      $("#speeds").append(options)
    }
  });
});

JSFiddle

为什么不试试这样的东西：

$(function() {
    $("#vehicles").on("change", function() {
        if ($("option:selected").attr("value") == "unicycle") {
            $("#speeds option.remove").hide();
        } else {
            $("#speeds option").show();
        }
    });
});

我不确定这是否是你想要的。

尝试

$(function() {        
    $("#vehicles")
    .data("clone", $(".remove").clone()) // `.remove` clone
    .on("change", function(e) {
        if ($(e.target).val() === "unicycle") {
            $("option[class=" + $(this).data("clone")[0].className + "]")
            .detach();
        } else {
            // append `.remove` `clone`,
            // if `#speeds` does not contain `.remove` `class`,
            // to prevent duplicate `.remove` collections being appended
            if (!$("#speeds *").hasClass("remove")) {
              $("#speeds").append($(this).data("clone"))
            }
        }
    });
});

jsfiddlehttp://jsfiddle.net/cc03xcx5/7/

相关文章：