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>

Answer 2

你比率是一个局部变量。我不会在你的事件处理程序之外存在。

声明全局变量并不是很好，因为它很快就会污染你的全局命名空间。

您可以修改代码以创建函数：

function myRequest(ratio)
{
    var urlLocation = "http://www.url.com/rest/v1/cms/story/";
    var saveImage = encodeURIComponent(dataUrl);

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

    $.ajax({
        type: "PUT",
        dataType: 'jsonp',
        url: urlLocation + data,
        data: {
            imageid: imageid.value,
            orientation: ratio,
            image: saveImage,
        },
        success: function (data) {
            $(".share-link").html("<div class='alert alert-success'><p>Success! " + imageid.value + " was posted.</p></div>");
            console.log(data);
        },
        error: function (data) {
            $(".share-link").html("<div class='alert alert-danger'><p>Couldn't send photo: <b>" + imageid.value + "</b></p></div>");
        }
    });
}

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

Answer 3

在功能之外定义比率，然后点击处理程序以使其成为全局。

这样，整个代码都可以使用相同的值访问它。

var ratio;

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

    var urlLocation = "http://www.url.com/rest/v1/cms/story/";
    var saveImage = encodeURIComponent(dataUrl);

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

    $.ajax({
        type: "PUT",
        dataType: 'jsonp',
        url: urlLocation + data,
        data: {
            imageid: imageid.value,
            orientation: ratio,
            image: saveImage,
        },
        success: function (data) {
            $(".share-link").html("<div class='alert alert-success'><p>Success! " + imageid.value + " was posted.</p></div>");
            console.log(data);
        },
        error: function (data) {
            $(".share-link").html("<div class='alert alert-danger'><p>Couldn't send photo: <b>" + imageid.value + "</b></p></div>");
        }
    });

或者，您可以在一行中为所有列表项执行整个单击处理程序序列。

var ratio;
$("li").click(function () {ratio = $(this).text().toLowerCase(); alert(ratio);});

Answer 4

我发现一个更简单的解决方案就是在插件内置的开关盒中添加变量进行裁剪：

switch (size) {
  case "square":
    this.options.ratio = 1;
    orientation = "SQUARE";
    break;
  case "9:16":
    this.options.ratio = 9 / 16;
    orientation = "PORTRAIT";
    break;
  case "16:9":
    this.options.ratio = 16 / 9;
    orientation = "LANDSCAPE";
    break;
}

使用jquery存储与按钮单击关联的变量

4 个答案: