如何在 onclick 后在动态 div 行下方插入 div答案

【问题标题】：How to insert a div below dynamic divs row after onclick如何在 onclick 后在动态 div 行下方插入 div
【发布时间】：2015-05-17 18:44:39
【问题描述】：

我有一排 div 漂浮在一个花药附近，盒子有一个最大宽度，所以每行只有 4 个 div 的最大值

当我重新调整窗口大小时，行会缩小，所以最后每行都有一个 div（这是我想要的方式）

我的问题是如何在每行下方添加另一个，无论窗口大小或单击时行中有多少个 div？

当行是固定大小时我设法做到了，但当它们是动态时却没有

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo plugins_url( "design.css", __FILE__ ) ;?>""" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    var oldRow = 0;
    var oldID = 0;
    var rowCount = 2;
    function openRow(row,id) {



        var elm = document.getElementById("rowInfo" + row);
        var txt = document.getElementById("text" + row);
        var logo = document.getElementById("logo" + id);

        if (oldID == id && elm.style.display == "block")
        {
            elm.style.display = "none";
            logo.style.backgroundColor = "green";
        }
        else {
            elm.style.display = "block";
            txt.innerHTML = "ID = " + id;
            oldID = id;

            if (oldRow!=0 && oldRow != row) {
                document.getElementById("rowInfo" + oldRow).style.display = "none";
            }

            if (oldID != 0) {
                document.getElementById("logo" + oldID).style.backgroundColor = 'green';
            }

            oldRow = row;
        }

    }
</script>
</head>
<body>
<div id="Main">
    <div class="row">
        <div class="rowBox">
            <div class="rowBoxLogo" id="logo1">
                <img src="<?php echo plugins_url( "logos/logo.png",__FILE__ ) ;?>"onclick="openRow(1,1)" />
            </div>

        </div>
        <div class="rowBox" >
            <div class="rowBoxLogo" id="logo2">
                <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,2)" />
            </div>
        </div>  
        <div class="rowBox" >
            <div class="rowBoxLogo" id="logo3">
                <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,3)" />
            </div>
        </div> 
        <div class="rowBox" >
            <div class="rowBoxLogo" id="logo4">
                <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,4)" />
            </div>
        </div>
    </div>
    <div class="rowInfo" id="rowInfo1">
        <p class="par" id="text1"></p>
    </div>
   <div class="row">
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo5">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,5)" />
           </div>

       </div>
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo6">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,6)" />
           </div>
       </div>
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo7">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,7)" />
           </div>
       </div>
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo8">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,8)" />
           </div>
       </div>
   </div>
   <div class="rowInfo" id="rowInfo2">
       <p class ="par" id="text2"></p>
   </div>
</div>

</body>
</html>

还有我的css

html {}
#Main {
    max-width:820px;
    margin:0 auto;
}
.row {
    width:100%;
    height:80px;
}
.rowBox {
    width:200px;
    height:100%;
    padding-left:5px;
    padding-bottom:5px;
    float: right;
}
.rowBoxLogo {
    width:100%;
    height:100%;
    float: right;
    background-color:green;
    vertical-align:middle;
    text-align:center
}
.rowInfo {
    width:100%;
    height:90px;
    background-color:green;
    display:none;
    padding:0 0 0 0;
}
.par {
    margin-top:0;
    padding:0;
}

【问题讨论】：

您是否尝试设置类似 google 图片预览的功能？
请在此处或jsfiddle.net上添加工作代码sn-p。

标签： javascript jquery html css

【解决方案1】：

对于这个问题，我会稍微改变一下样式。即，将块布局从float: right 更改为display: inline-block。然后使用这个简单的javascript很容易达到预期的效果：

var $info = $('<div class="rowInfo"><p class="par"></p></div>');
$('.rowBoxLogo').click(function() {
    var $block = $(this).parent('.rowBox');
    if ($block.next().hasClass('.rowInfo')) {
        $info.toggle();
    }
    else {
        $info.insertAfter($block).css('display', 'block');
        $info.find('.par').text("ID = " + this.id);
    }
});

在这种情况下，您不再需要在每个块上放置 onclick 属性。

演示： http://plnkr.co/edit/mbV9toL5CsZ2BwlVEFYH?p=preview

您也可能有兴趣查看我在类似问题How to target div at the end of the row? 上提供的相关答案。

【讨论】：