Question

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

我正在试验价值检测。我想弄清楚的是，当填充顶部和底部[A]是相同的值（以及左右[B]）时，如何将值设置为padding: A B;

如果全部相同，则将值设置为padding: A;
如果所有都是不同的设定值为空/空白和
如果一切都不同，或A＆amp; B可能相同，但C和D可能不同，然后将值设置为padding: A B C D;

脚本工作正常onload，但是当输入值改变时，我的结果不是最终确定。

有人可以解释为什么会这样吗？

$(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是否相等。

＆GT;＆GT;如果它们相等，则可以将中间值设置为等于任何值（因为它们相等）。

＆GT;＆GT;如果它们不相等，那么你可以检查顶部和底部是否相等。＆amp;＆amp;左右相等。如果是，则可以将中间设置为上/下数字+“”+左/右数字。

＆GT;＆GT;否则设置中间到顶部的数字，右边的数字，下面的数字，左边的数字。

修改

实际上，我不得不对这个想法进行修补，然后提出来帮助你。但是，就是这样。没有我的帮助！

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

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

Answer 2

我会玩这个

var a=$(".padding-top"), b=..., c=..., d=...;
var test=0,padding;
if (a)                 test += 1;
if (b&& b!=a)          test += 2;
if (c && c!=a)         test += 4;
if (d && d!=c && d!=a) test += 8;

if (test== 1) padding = a;
if (test== 2 || test == 3) padding = a + " " + b;  // when a+b or just b, we need a and b
if (test>4 && test < 8) padding = a + " " + b + " " + c; // c, a+c or b+c
if (test > 8) padding = a + " " + b + " " + c " " + d;

你也可以

$(".paddings").on('keyup change', function() {
  Finalize();
});

并使用ID填充顶部，左侧，底部，右侧

Answer 3

如您所提出的问题所述，我提供了以下代码：

$(document).ready(function() {
    var top = $(".padding-top").val(),
        bottom = $(".padding-bottom").val(),
        left = $(".padding-left").val(),
        right = $(".padding-right").val(),
        result = 'Padding: ';
      // Applies new code value
      function Finalize() {
        if(top === bottom === left === right) {
            //If all are same
            result +=  top + ' ';
        } else {
            if ((top === bottom) && (left === right)) {
              // Check if first two values are same
                result +=  top + ' ' + left + ' ';
            } else {
                result +=  left + ' ' + right + ' ' + top + ' ' + bottom + ' ';
            }
        }
        result += 'Px';
        $('#middle-input').val(result);
      }

      Finalize();
      $(".padding-inputs").on('keyup change', function() {
        Finalize();
      });
});

如果值是相同的更新代码

3 个答案: