javascript - 使用 jquery 存储与按钮点击关联的变量

Question

我正在尝试存储与给定按钮关联的变量，然后可以将其用作 ajax PUT 的数据字段中的参数之一。我有以下内容，但无法弄清楚为什么它不存储 ratio 的值:

HTML

<li class="imgly-controls-item-square">SQUARE</li>
<li class="imgly-controls-item-16-9">16-9</li>
<li class="imgly-controls-item-9-16">9-16</li>

jQuery

$(".imgly-controls-item-square").click(function () {
    var ratio = "square";
    alert(ratio);
});
$(".imgly-controls-item-16-9").click(function () {
    var ratio = "16-9";
    alert(ratio);
});
$(".imgly-controls-item-9-16").click(function () {
    var ratio = "9-16";
    alert(ratio);
});

//Will store value of selected image crop orientation, that can then be appended to ajax data parameter below
var imageOrientation = ratio;

当前 JSFiddle:LINK

Answer 1

因为您的 ratio 变量是事件处理函数中的局部变量。只需直接设置imageOrientation即可:

var imageOrientation = /* default value here */;
$(".imgly-controls-item-square").click(function () {
    imageOrientation = "square";
});
$(".imgly-controls-item-16-9").click(function () {
    imageOrientation = "16-9";
});
$(".imgly-controls-item-9-16").click(function () {
    imageOrientation = "9-16";
});

// ...

也就是说，我会使用单选按钮并从选定的单选按钮中读取内容，而不是使用 li。您可以使用现代浏览器在很大程度上设置单选按钮的样式。

实例:

// A scoping function to avoid creating globals
(function() {
  // Declare the variable, set a default value
  var imageOrientation = "default value";
  
  // Respond to clicks on the list items but remembering an updated value
  $(".imgly-controls-item-square").click(function() {
    imageOrientation = "square";
  });
  $(".imgly-controls-item-16-9").click(function() {
    imageOrientation = "16-9";
  });
  $(".imgly-controls-item-9-16").click(function() {
    imageOrientation = "9-16";
  });
  
  // Sample code using the updated value
  $("input[type=button]").click(function() {
    snippet.log("Current orientation: " + imageOrientation);
  });
})();

<ul>
  <li class="imgly-controls-item-square">SQUARE</li>
  <li class="imgly-controls-item-16-9">16-9</li>
  <li class="imgly-controls-item-9-16">9-16</li>
</ul>
<input type="button" value="Do Something">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>