Javascript 浮动项目画廊。我想使用jquery在两行之间添加一个类_Javascript_Jquery_Html_Css_Gallery

Javascript 浮动项目画廊。我想使用jquery在两行之间添加一个类

javascript jquery html css

Javascript 浮动项目画廊。我想使用jquery在两行之间添加一个类,javascript,jquery,html,css,gallery,Javascript,Jquery,Html,Css,Gallery,因此，我将尝试更详细地解释。我有一个画廊，有9个元素向左浮动，每行创建3个元素，如下所示： 1 2 3 <--line 1 4 5 6 <--line 2 7 8 9 <--line 3 以及需要根据单击的元素在行之间添加的内容 <div class="dealer--address" id="australia"> Address here </div> <div class="dealer

因此，我将尝试更详细地解释。我有一个画廊，有9个元素向左浮动，每行创建3个元素，如下所示：

    1   2   3 <--line 1

    4   5   6 <--line 2

    7   8   9 <--line 3

以及需要根据单击的元素在行之间添加的内容

<div class="dealer--address" id="australia">
Address here
</div>
<div class="dealer--address" id="hongkong">
Address here
</div>
<div class="dealer--address" id="sweden">
Address here
</div>
<div class="dealer--address" id="uk">
Address here
</div>
<div class="dealer--address" id="germany">
Address here
</div>

 etc...


地址在这里
地址在这里
地址在这里
地址在这里
地址在这里
等

您是否考虑过在浮动的左元素下方添加一个额外的div，并使用

display:none

然后使用jQuery使用on-click函数显示它们

$（“#可单击元素”）。单击（函数（）{
$（“要显示的元素”）.show（）；
});
这就是我使用jQuery执行所有单击和显示行为的方式。

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        .floating {
            float: left;
            width: 30%;
            margin: 1%;
            height: 100px;
            background: #ffe4c4;
        }

        .Content {
            display:none;       
            width: 100%;
            background: green;
        }

        #contentOnDisplay {
            min-height: 100px;
            width: 100%;
            float: left; 
            background: green;
            display: block;
        }
    </style>
</head>

<body>
    <div class="Content" id="floating1Content">content for 1</div>
    <div class="Content" id="floating2Content">content for 2</div>
    <div class="Content" id="floating3Content">content for 3</div>
    <div class="Content" id="floating4Content">content for 4</div>
    <div class="Content" id="floating5Content">content for 5</div>
    <div class="Content" id="floating6Content">content for 6</div>
    <div class="Content" id="floating7Content">content for 7</div>
<!--    <div class="Content" id="floating8Content">content for 8</div>
    <div class="Content" id="floating9Content">content for 9</div>-->

    <div class="floating" id="floating1"></div>
    <div class="floating" id="floating2"></div>
    <div class="floating" id="floating3"></div>
    <div class="floating" id="floating4"></div>
    <div class="floating" id="floating5"></div>
    <div class="floating" id="floating6"></div>
    <div class="floating" id="floating7"></div>
<!--    <div class="floating" id="floating8"></div>
    <div class="floating" id="floating9"></div>-->

<script type="text/javascript">
    var getLeftMostPositionOfFirstItem = $("#floating1").position().left;

    $(document).ready(function() {
        $(".floating").click(function() {
            var elementID = $(this).attr("id");
            $("#contentOnDisplay").remove(); //hides the existing contents
            var firstItemOFNextRow = getTheFirstItemOfNextRow(elementID);

            getAllTheConstentsOfAdivAndPrepenedIt(firstItemOFNextRow, getTheIdOfFirstItemOfNextRow(elementID));
            return false;
        });
    });

    function getTheFirstItemOfNextRow(clickedItemID) {
        var getTheIdNumberOfThisItem = parseInt(clickedItemID.replace("floating", ""));
        var position = $("#" + clickedItemID).position();
        var idOfTheElementToBeInstertedBefore = "";
        for (var i = getTheIdNumberOfThisItem + 1; i < $(".floating").length; i++) {
            var leftPostitonOfThisItem = $("#floating" + i).position().left;
            if (leftPostitonOfThisItem < getLeftMostPositionOfFirstItem*1.5) {
                idOfTheElementToBeInstertedBefore = "#floating" + i;
                break;
            }
        }
        if (idOfTheElementToBeInstertedBefore.length == "") {
            idOfTheElementToBeInstertedBefore = "#floating" + $(".floating").length;
        }
        return idOfTheElementToBeInstertedBefore;
    };

    function getTheIdOfFirstItemOfNextRow(elementID) {
        return parseInt(elementID.replace("floating", ""));
    };

    function getAllTheConstentsOfAdivAndPrepenedIt(idToPrepend, IdNumber) {
        var htmlOfTheContent = $("#floating" + IdNumber + "Content").html();
        htmlOfTheContent = "<div id='contentOnDisplay'>" + htmlOfTheContent + "</div>";
        if (IdNumber <= $(".floating").length - getNuumberOfItemsInLastRow()) {
            $(idToPrepend).before(htmlOfTheContent);
        } else {
            $(idToPrepend).after(htmlOfTheContent);
        }
        return false;
    };

    function getNuumberOfItemsInLastRow() {
        var numberOfColoumns = 0;
        for (var i = $(".floating").length; i > 0; i--) {
            var leftPostitonOfThisItem = $("#floating" + i).position().left;
            numberOfColoumns++;
            if (leftPostitonOfThisItem < getLeftMostPositionOfFirstItem * 1.5) { 
                break;
            }
        }
        return numberOfColoumns;
    };
</script>
</body>
</html>

试验
.漂浮{
浮动：左；
宽度：30%；
利润率：1%；
高度：100px；
背景#ffe4c4；
}
.内容{
显示：无；
宽度：100%；
背景：绿色；
}
#内容显示{
最小高度：100px；
宽度：100%；
浮动：左；
背景：绿色；
显示：块；
}
1的内容
内容为2
内容为3
内容为4
内容为5
内容为6
第7页的内容
var getLeftMostPositionOfFirstItem=$（“#floating1”）.position（）.left；
$（文档）.ready（函数（）{
$（“.floating”）。单击（函数（）{
var elementID=$（this.attr（“id”）；
$（“#contentOnDisplay”）.remove（）；//隐藏现有内容
var firstItemOfExtrow=gettheFirstItemOfExtrow（elementID）；
获取ADIVANDPREPENEDIT的所有权限（Extrow的第一项，获取Nextrow的第三项（elementID））；
返回false；
});
});
函数获取Extrow的第一项（单击编辑ID）{
var getHeidNumberOfThisItem=parseInt（单击EditEmid.replace（“浮动”），“”）；
变量位置=$（“#”+单击编辑ID）.position（）；
var idoftheelementtobeinsertedbefore=“”；
对于（var i=getHeidNumberOfThisItem+1；i<$（“.floating”）.length；i++）{
var LEFTPOSTITOOFTHISTEM=$（“#浮动”+i）.position（）.left；
if（此项的leftposition问题中可能还包括您的标记？抱歉。我认为代码可能会更混乱，但这根本不是动态的，因为所有东西都是硬编码的。因为我正在做的是在每行后面添加3个隐藏块。而且这也不会给我任何机会（太棒了，正是我想要的。
<div class="dealer--address" id="australia">
Address here
</div>
<div class="dealer--address" id="hongkong">
Address here
</div>
<div class="dealer--address" id="sweden">
Address here
</div>
<div class="dealer--address" id="uk">
Address here
</div>
<div class="dealer--address" id="germany">
Address here
</div>

 etc...

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        .floating {
            float: left;
            width: 30%;
            margin: 1%;
            height: 100px;
            background: #ffe4c4;
        }

        .Content {
            display:none;       
            width: 100%;
            background: green;
        }

        #contentOnDisplay {
            min-height: 100px;
            width: 100%;
            float: left; 
            background: green;
            display: block;
        }
    </style>
</head>

<body>
    <div class="Content" id="floating1Content">content for 1</div>
    <div class="Content" id="floating2Content">content for 2</div>
    <div class="Content" id="floating3Content">content for 3</div>
    <div class="Content" id="floating4Content">content for 4</div>
    <div class="Content" id="floating5Content">content for 5</div>
    <div class="Content" id="floating6Content">content for 6</div>
    <div class="Content" id="floating7Content">content for 7</div>
<!--    <div class="Content" id="floating8Content">content for 8</div>
    <div class="Content" id="floating9Content">content for 9</div>-->

    <div class="floating" id="floating1"></div>
    <div class="floating" id="floating2"></div>
    <div class="floating" id="floating3"></div>
    <div class="floating" id="floating4"></div>
    <div class="floating" id="floating5"></div>
    <div class="floating" id="floating6"></div>
    <div class="floating" id="floating7"></div>
<!--    <div class="floating" id="floating8"></div>
    <div class="floating" id="floating9"></div>-->

<script type="text/javascript">
    var getLeftMostPositionOfFirstItem = $("#floating1").position().left;

    $(document).ready(function() {
        $(".floating").click(function() {
            var elementID = $(this).attr("id");
            $("#contentOnDisplay").remove(); //hides the existing contents
            var firstItemOFNextRow = getTheFirstItemOfNextRow(elementID);

            getAllTheConstentsOfAdivAndPrepenedIt(firstItemOFNextRow, getTheIdOfFirstItemOfNextRow(elementID));
            return false;
        });
    });

    function getTheFirstItemOfNextRow(clickedItemID) {
        var getTheIdNumberOfThisItem = parseInt(clickedItemID.replace("floating", ""));
        var position = $("#" + clickedItemID).position();
        var idOfTheElementToBeInstertedBefore = "";
        for (var i = getTheIdNumberOfThisItem + 1; i < $(".floating").length; i++) {
            var leftPostitonOfThisItem = $("#floating" + i).position().left;
            if (leftPostitonOfThisItem < getLeftMostPositionOfFirstItem*1.5) {
                idOfTheElementToBeInstertedBefore = "#floating" + i;
                break;
            }
        }
        if (idOfTheElementToBeInstertedBefore.length == "") {
            idOfTheElementToBeInstertedBefore = "#floating" + $(".floating").length;
        }
        return idOfTheElementToBeInstertedBefore;
    };

    function getTheIdOfFirstItemOfNextRow(elementID) {
        return parseInt(elementID.replace("floating", ""));
    };

    function getAllTheConstentsOfAdivAndPrepenedIt(idToPrepend, IdNumber) {
        var htmlOfTheContent = $("#floating" + IdNumber + "Content").html();
        htmlOfTheContent = "<div id='contentOnDisplay'>" + htmlOfTheContent + "</div>";
        if (IdNumber <= $(".floating").length - getNuumberOfItemsInLastRow()) {
            $(idToPrepend).before(htmlOfTheContent);
        } else {
            $(idToPrepend).after(htmlOfTheContent);
        }
        return false;
    };

    function getNuumberOfItemsInLastRow() {
        var numberOfColoumns = 0;
        for (var i = $(".floating").length; i > 0; i--) {
            var leftPostitonOfThisItem = $("#floating" + i).position().left;
            numberOfColoumns++;
            if (leftPostitonOfThisItem < getLeftMostPositionOfFirstItem * 1.5) { 
                break;
            }
        }
        return numberOfColoumns;
    };
</script>
</body>
</html>