Question

首先，我无法在没有Jquery的情况下看到另一种方法，如果有更好或更正确的方法，请告诉我。

所以基本上我是以圆形形状加载三个div，在它们内部每个都是一个内部div，其中包含从@for循环生成的列表，因此大小会有所不同（尽管不应该太大）。 / p>

也许我的css一开始就错了，但是它们不会像桌面边框一样长大，所以我试图找到最大div的最大宽度或高度并将其应用到所有这些中以便它们全部匹配。

我想要的是一个9（3x3）个单元格的网格，左上角，左下角和右下角有一个圆圈（但可能会改变）。下面是我一直在努力尝试正确的样本。注 - 列表异步加载数据。

.circleBase {
  border-radius: 50%;
  behavior: url(PIE.htc);
}

.type1 {
  display: table-cell;
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid #ff6600;
  vertical-align: middle;
  text-align: center;
}

.type2 {
  display: table-cell;
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid #ff6600;
  vertical-align: middle;
  text-align: center;
}

.type3 {
  display: table-cell;
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid #ff6600;
  vertical-align: middle;
  text-align: center;
}

.InnerCircle1 {
  display: inline-block;
}

.InnerCircle2 {
  display: inline-block;
}

.InnerCircle3 {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circleBase type1">
  <div class="InnerCircle1">
    <div id="firstTable">
      @Html.Partial("_...").
      <div class="spinner">
      </div>
      <div>Loading...</div>
    </div>
  </div>
</div>
<br />
<div class="circleBase type2">
  <div class="InnerCircle2">
    <div id="secondTable">
      @Html.Partial("_...")
      <div class="spinner">
      </div>
      <div>Loading...</div>
    </div>
  </div>
</div>

<div class="circleBase type3">
  <div class="InnerCircle3">
    <div id="thirdTable">
      @Html.Partial("_...")
      <div class="spinner">
      </div>
      <div>Loading...</div>
    </div>
  </div>
</div>

j查询...

<script type="text/javascript">
    $(document).ready(function () {

        //Load Age Counts
        $.ajax({
            url: "/Cont/_TableOne",
            type: "GET",
        })
        .done(function (partialViewResult) {
            $("#firstTable").html(partialViewResult)
        })//Set Width/Height
        .done(function () {
            var aw = $(".InnerCircle1").width() + 50;
            var ah = $(".InnerCircle1").height() + 50;
            if (aw > ah) {
                $('.type1').css('width', aw);
                $('.type1').css('height', aw);
            } else {
                $('.type1').css('width', ah);
                $('.type1').css('height', ah);
            };
            console.log("1");
        });

        //Load Age Counts
        $.ajax({
            url: "/Cont/_TableTwo",
            type: "GET",
        })
        .done(function (partialViewResult) {
            $("#secondTable").html(partialViewResult)
        })//Set Width/Height
        .done(function () {
            var aw = $(".InnerCircle2").width() + 50;
            var ah = $(".InnerCircle2").height() + 50;
            if (aw > ah) {
                $('.type2').css('width', aw);
                $('.type2').css('height', aw);
            } else {
                $('.type2').css('width', ah);
                $('.type2').css('height', ah);
            };
            console.log("2");
        });

        //Load Age Counts
        $.ajax({
            url: "/Cont/_TableThree",
            type: "GET",
        })
        .done(function (partialViewResult) {
            $("#thirdTable").html(partialViewResult)
        })//Set Width/Height
        .done(function () {
            var aw = $(".InnerCircle3").width() + 50;
            var ah = $(".InnerCircle3").height() + 50;
            if (aw > ah) {
                $('.type3').css('width', aw);
                $('.type3').css('height', aw);
            } else {
                $('.type3').css('width', ah);
                $('.type3').css('height', ah);
            };
            console.log("3");
        });
    })
    .done(function () {
        //sync up
        var aw = $(".InnerCircle1").width() + 50;
        var ah = $(".InnerCircle1").height() + 50;
        var cw = $(".InnerCircle2").width() + 50;
        var ch = $(".InnerCircle2").height() + 50;
        var dw = $(".InnerCircle3").width() + 50;
        var dh = $(".InnerCircle3").height() + 50;

        var values = [aw, ah, cw, ch, dw, dh];
        var maxVal = 0;

        for (var i = 1; i < values.count(); i++) {
            if (maxVal < values[i]) {
                maxVal = i;
            }
        }
        console.log(maxVal);
    });
</script>

我已尝试将每个partialview调用放入其自己的函数中并使用$ .when调用它们，但这似乎也无效。

<script type="text/javascript">
    $(document).ready(function () {
        $.when(TableOne(), TableTwo(), TableThree()).done(function () {
            FinalSync();
        });
    });
</script>

它没有像另一个那样给出错误，但它没有全部同步它们，我也在每个中放了一个console.log，最后的同步在其他人之前记录了这个调用！

Answer 1

https://jsfiddle.net/Lnc1yzk3/ 你的事情过于复杂！

{
  _id: "12345",
  name: "My Product",
  ...
  colors: [
    {
      _id: "Color_1",
      images: [
        "http://myserver.com/images/product_12345_1",
        "http://myserver.com/images/product_12345_2",
      ]
    },
    {
      _id: "Color_3",
      images: [
        "http://myserver.com/images/product_12345_3",
        "http://myserver.com/images/product_12345_4",
      ]
    }
  ],
  sizes: [
    {
      _id: "Size_5"
    },
    {
      _id: "Size_9"
    }
  ],
  materials: [
    {
      _id: "Material_2"
    }
  ],
  variations: [
    {
      color: "Color_1",
      size: "Size_5",
      material: "Material_2",
      SKU: "98765"
      price: 10,
      stock: 2
    },
    {
      color: "Color_1",
      size: "Size_9",
      material: "Material_2",
      SKU: "87654"
      price: 11,
      stock: 5
    },
    ...
  ],
}

但是由于你发出了3个不同的ajax调用，我会将调整大小移动到一个单独的函数，如$.when(TableOne(), TableTwo(), TableThree()).done(function () { var maxH = 0; $("div.circleBase").each(function() { maxH = Math.max(maxH, $(this).height()); }); maxH += 50; $("div.circleBase").width(maxH); $("div.circleBase").height(maxH); });，并在每个div加载后调用它。所以FinalSync不是最好的名字。也许SyncWidthAndHeightAfterDivLoaded：）

我假设您希望每个圆圈的大小相同....否则只需在完成ajax请求后调整当前圆圈的大小。

尝试通过jquery加载一组后重新调整潜水

1 个答案: