Question

你可以说这适用于大多数事件，但在我的情况下，选择框的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

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/

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

2 个答案: