如果值是相同的更新代码

If values are the same update code

本文关键字：更新 代码 如果      更新时间：2023-09-26

http://liveweave.com/R9jW9x

我有4个文本框，每个文本框代表一个css填充位置(例如顶部填充、左侧填充等(

我正在试验价值检测。我想弄清楚的是，当填充顶部和底部的[A]是相同的值(以及左侧和右侧的[B](时，如何将值设置为padding: 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();
  });
});

我不会为您编写代码。但是，我希望能把你送到正确的方向：

首先，您应该检查顶部填充、右侧填充、底部填充和左侧填充是否相等。

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

>>如果它们不相等，那么你可以检查顶部和底部是否相等&amp；左和右是相等的。如果是，则可以将中间数字设置为顶部/底部数字+"+左侧/右侧数字。

>>否则，设置从中间到顶部的数字、右侧数字、底部数字、左侧数字。

编辑

事实上，我对这个想法进行了一些修改，并想出了这个来帮助你。但是，就这样。我再也帮不上忙了！

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

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

我会玩这个

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填充顶部、左侧、底部和右侧

正如您问题中所述的情况，我制作了以下代码：

$(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();
      });
});
相关文章：