Question

你好我点击了4个div图层。我试图设置一个动作，使数据在单击图层时向左移动。这是我开始使用的javascript。

<!DOCTYPE html>
<html>
<head>
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="item_clear.js"></script>
<script src="scripts/jquery.timer.js"></script>




</head>

<style>
h1 {
    font-family: Arial, Helvetica, sans-serif;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
}
    hr {
    clear: both;
    visibility: show;
    width: 10px;
    margin: 0 10px;
}
.auto-style1 {
    border-style: solid;
    border-width: 1px;
    padding: 1px 4px;
}
</style>

<body>
<div id="layer4" class="auto-style1" style="position: absolute; width:     339px; height: 344px; z-index: 4; left: 1046px; top: 1px">    

<div>

        <div1 style="width: 327px">
<h1 style="text-align:left;float:left;">2x &nbsp;</h1>
<h1 style="text-align:right;float:left;">Cheese Burger</h1>
<!--<hr style="clear:both;"/>-->
    <h3>Lettuce</h3>
    <h3>Ketchup</h3>
    <h3>Tomato</h3>
    <h3>Pickles</h3>
    <h3>Mayo</h3>
   <h3>Mustard</h3>
</div1>  

</div>
</div>

<div id="layer3" class="auto-style1" style="position: absolute; width:     339px; height: 344px; z-index: 3; left: 699px; top: 1px">

    <div2 style="width: 327px">
<h1 style="text-align:left;float:left;">2x &nbsp;</h1>
<h1 style="text-align:right;float:left;">Cheese Burger Special</h1>
<!--<hr style="clear:both;"/>-->
    <h3>Lettuce</h3>
    <h3>Ketchup</h3>
    <h3>Tomato</h3>
    <h3>Pickles</h3>
    <h3>Mayo</h3>
    <h3>Mustard</h3>
    </div2>  

</div>

<div id="layer2" class="auto-style1" style="position: absolute; width: 339px; height: 344px; z-index: 2; left: 350px; top: 1px">

        <div3 style="width: 327px">
<h1 style="text-align:left;float:left;">2x &nbsp;</h1>
<h1 style="text-align:right;float:left;">Cheese Burger</h1>
<!--<hr style="clear:both;"/>-->
    <h3>Lettuce</h3>
    <h3>Ketchup</h3>
    <h3>Tomato</h3>
    <h3>Pickles</h3>
    <h3>Mayo</h3>
    <h3>Mustard</h3>
        </div3>  

</div>
    <div id="layer8" class="auto-style1" style="position: absolute; width: 339px; height: 344px; z-index: 8; left: 1047px; top: 349px">

<div4 style="width: 327px">
<h1 style="text-align:left;float:left;">2x &nbsp;</h1>
<h1 style="text-align:right;float:left;">Cheese Burger</h1>
<!--<hr style="clear:both;"/>-->
    <h3>Lettuce</h3>
    <h3>Ketchup</h3>
    <h3>Tomato</h3>
    <h3>Pickles</h3>
    <h3>Mayo</h3>
    <h3>Mustard</h3>
</div4>  

    </div>
    <div id="layer7" class="auto-style1" style="position: absolute; width: 339px; height: 344px; z-index: 7; left: 699px; top: 349px">

<div5 style="width: 327px">
<h1 style="text-align:left;float:left;">2x &nbsp;</h1>
<h1 style="text-align:right;float:left;">Cheese Burger</h1>
<!--<hr style="clear:both;"/>-->
    <h3>Lettuce</h3>
    <h3>Ketchup</h3>
    <h3>Tomato</h3>
    <h3>Pickles</h3>
    <h3>Mayo</h3>
    <h3>Mustard</h3>
</div5>  

    </div>
    <div id="layer6" class="auto-style1" style="position: absolute; width: 339px; height: 344px; z-index: 6; left: 350px; top: 349px">

<div6 style="width: 327px">
<h1 style="text-align:left;float:left;">2x &nbsp;</h1>
<h1 style="text-align:right;float:left;">Cheese Burger</h1>
<!--<hr style="clear:both;"/>-->
    <h3>Lettuce</h3>
    <h3>Ketchup</h3>
    <h3>Tomato</h3>
    <h3>Pickles</h3>
    <h3>Mayo</h3>
    <h3>Mustard</h3>
</div6>  

    </div>
    <div id="layer5" class="auto-style1" style="position: absolute; width: 339px; height: 344px; z-index: 5; left: 1px; top: 349px">

<div7 style="width: 327px">
<h1 style="text-align:left;float:left;">2x &nbsp;</h1>
<h1 style="text-align:right;float:left;">Cheese Burger</h1>
<!--<hr style="clear:both;"/>-->
    <h3>Lettuce</h3>
    <h3>Ketchup</h3>
    <h3>Tomato</h3>
    <h3>Pickles</h3>
    <h3>Mayo</h3>
    <h3>Mustard</h3>
 </div7>  

    </div>
    <div id="layer1" class="auto-style1" style="position: absolute; width: 339px; height: 344px; z-index: 1; left: 1px; top: 1px">

<div8 style="width: 327px">
<h1 style="text-align:left;float:left;">2x &nbsp;</h1>
<h1 style="text-align:right;float:left;">Cheese Burger</h1>
<!--<hr style="clear:both;"/>-->
    <h3>Lettuce</h3>
    <h3>Ketchup</h3>
    <h3>Tomato</h3>
    <h3>Pickles</h3>
    <h3>Mayo</h3>
    <h3>Mustard</h3>
</div8>  

    </div>

</body>
</html>




    $(document).ready(function(){
        $("div").click(function(){
            $(this).empty();
        });
    });

如何设置它，以便在点击时清空图层时将第2层数据转到第1层？

Answer 1

正如评论中所说的那样，你似乎给自己带来了一些困难时期......无用地将你的“产品”div定义为绝对位置的左上角和左上角，这可能需要花费太多时间来计算。

我必须删除所有这些艰苦的工作才能创建你真正想要的移位效果。所以现在，所有的产品div都定义相同。

所以当其中一个被删除时，其他所有人都会因为float:left而向左移动......就像一条等候线。

我删除了所有内联HTML内联CSS并改为使用了类它更容易维护。

为了解决“Cheese Burger Special”的对齐问题，我使用CSS使这两个<h1>表现得像表格单元格。

关于4x2网格格式：实际上，产品方块需要min-width才能正确显示。这个宽度是你计算的宽度（339像素）。我应用了width:25%来确保每行只有4个产品，屏幕宽度超过1356px。

但对于较窄的屏幕（如手机！），每行4个无法维持。它会自动排列，这是一件好事。

您要求的功能：
现在当您点击.product div时，它会检查显示的数量（在.qty中）并删除1.
如果此结果为零，则还会删除div。

“移位效果”由于CSS浮动而自行完成。

它会在“wainting”行的末尾创建一个空div，这会产生内容在固定div中移动的错觉。

$(document).ready(function() {
    $(".product").click(function() {

        // Find the quantity and remove 1.
        var quantity=parseInt($(this).find(".qty").html());
        quantity--;
        $(this).find(".qty").html(quantity+"x &nbsp;");

        if(quantity==0){
            // Creates an empty square at the end of the div list.
            var temp="<div class='product'></div>";
            $(this).parent().append(temp);

            // Remove this product.
            $(this).remove();
        }
    });
});

请参阅CodePen中的代码见Fullscreen。

Jquery - 当div被清空时将数据移到左边

1 个答案: