javascript - 如果值相同则更新代码

Question

http://liveweave.com/R9jW9x

我有 4 个文本框，每个文本框代表一个 css 填充位置(例如 padding-top、padding-left 等:)

我正在尝试值(value)检测。我想要弄清楚的是，当填充顶部和底部 [A] 具有相同的值(以及左侧和右侧 [B])时，如何设置填充值:A B;

如果全部相同则将值设置为padding: A;
如果全部不同，则将值设置为无/空白
和
如果全部不同，或者 A 和 B 可能相同，但 C 和 D 可能不同，则将值设置为 padding: A B C D;

脚本在加载时工作正常，但是当输入值更改时，我的结果尚未最终确定。

谁能解释一下这是为什么吗？

$(document).ready(function() {
  var top = $(".padding-top").val(),
      bottom = $(".padding-bottom").val(),
      left = $(".padding-left").val(),
      right = $(".padding-right").val(),
      result = $(".padding-final");

  // Update padding code
  var Finalize = function() {
    if ((top === "") && (right === "") && (bottom === "") && (left === "")) {
      // Check if all are empty
      result.val("");
    } else if ((top === right) && (bottom === left)) {
      // If all are same
      result.val("padding: " + top + "px;");
    } else if ((top === bottom) && (left === right)) {
      // Check if first two values are same
      result.val("padding: " + top + "px " + left + "px;");
    } else {
      result.val("padding: " + top + "px " + right + "px " + bottom + "px " + left + "px;");
    }
  };

  // Update padding code when sides change
  $(window).on('load keyup change', function() {
    Finalize();
  });
});

Answer 1

我不会为你写代码。但是，我希望能给您带来正确的方向:

首先，您应该检查 padding-top、padding-right、padding-bottom 和 padding-left 是否彼此相等。

>> 如果它们相等，那么您可以将中间的值设置为等于任何值(因为它们相等)。

>> 如果它们不相等，那么您可以检查顶部和底部是否彼此相等&&左侧和右侧是否彼此相等。如果是，那么您可以将中间设置为上/下数字+“”+左/右数字。

>> 否则设置中间到顶部编号、右侧编号、底部编号、左侧编号。

<小时/>

编辑

事实上，我对这个想法做了一些修改，并想出了这个来为你提供更多帮助。但是，就是这样。我不再提供帮助!

var top = 2;
var bottom = 2;
var right = 5;
var left = 5;

top == bottom && right == left && top == left ? alert(top) 
    : top == bottom && right == left ? alert(top + " " + left) 
        : alert(top + " " + right + " " + bottom + " " + left);

JSFiddle

<小时/>

解决此问题后，更具挑战性的问题是在中间框中输入数字并相应地更改顶部/右侧/底部/左侧填充。