缓存事件变量而不使它们成为全局变量

Question

你可以说这适用于大多数事件，但在我的情况下，select 框的 change 事件。我有两个 select 盒子。我想 insert/re-insert 取决于 select 框中的选项，具体取决于哪个选项在第一个 select 框中 selected。我已经设法做到了这一点，但需要为我想要操作的选项创建一个全局变量。有没有办法在事件中执行此操作或变量不是全局变量的某种解决方法？

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

Answer 1

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

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

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

Answer 2

尝试

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

jsfiddle http://jsfiddle.net/cc03xcx5/7/

缓存事件变量而不使它们成为全局变量

Caching variables for events without making them global

javascript

variables

jquery

scope

jquery-events