如何互换所有div

That is how my gallery looks like:

这就是我的画廊的样子:

I need javascript/jquery functions: "arrow_left()" and "arrow_right" for changing positions of divs with images (all divs with everything in middle). For example when I click on right arrow on "image 2", "image 2" should swap with "image 3" their possitions. Below I present how swap "image 2" with "image 3" leaving "image 2" empty ("image 3" will be removed).

我需要javascript / jquery函数:“arrow_left()”和“arrow_right”用于更改带图像的div的位置(所有div都包含中间的所有内容)。例如,当我点击“图像2”上的右箭头时,“图像2”应与“图像3”交换它们的位置。下面我将介绍如何将“图像2”与“图像3”交换为“空白”(“图像3”将被删除)。

<script>
    function arrow_right(id_number) {
        var present_div = $('#' + id_number);
        id_number = id_number + 1;
        var next_div = $('#' + id_number);

        $(present_div).replaceWith(next_div); 
        //$(next_div).replaceWith(present_div); <- doesn't work
    }

    function arrow_left(id_number) {
        var present_div = $('#' + id_number);
        id_number = id_number - 1;
        var prev_div = $('#' + id_number);

        $(present_div).replaceWith(prev_div); 
        //$(prev_div).replaceWith(present_div); <- doesn't work
    }
</script>

    <div id='ID_1' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(1);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(1);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='1' class='img-responsive' src='path/to/img'> 
    </div>
</div>
<div id='ID_2' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(2);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(2);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='2' class='img-responsive' src='path/to/img'> 
    </div>
</div>

<div class='clearfix visible-md-block'></div>

<div id='ID_3' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(3);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(3);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='3' class='img-responsive' src='path/to/img'> 
    </div>
</div>
<div class='clearfix visible-lg-block'></div>
<div id='ID_4' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(4);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(4);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='4' class='img-responsive' src='path/to/img'> 
    </div>
</div>

<div class='clearfix visible-md-block'></div>

<div id='ID_5' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(5);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(5);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='5' class='img-responsive' src='path/to/img'> 
    </div>
</div>
<div id='ID_6' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(6);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(6);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='6' class='img-responsive' src='path/to/img'> 
    </div>
</div>
<div class='clearfix visible-lg-block'></div>

<div class='clearfix visible-md-block'></div>

<div id='ID_7' class='col-lg-4 col-md-6 portfolio-item'>
    <div class='thumbnail'>
        <div onclick='arrow_left(7);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
        <div onclick='arrow_right(7);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
        <img id='7' class='img-responsive' src='path/to/img'> 
    </div>
</div>

I don't have idea how upgreat that. If anyone can help me? Mabye someone know some other solution for that, but no drag and drop - I tested jQuery UI sortable and it doesn't work so well.

我不知道这有多大。如果有人可以帮助我? Mabye有人知道一些其他的解决方案,但没有拖放 - 我测试jQuery UI可排序,它不能很好地工作。

I don't need slider. I need present all images in page and changing them order (in administrator panel). Each image in database have field "Order" which affect the display order of images on page. I'm looking for solution for nice change this order.

我不需要滑块。我需要在页面中显示所有图像并更改它们的顺序(在管理员面板中)。数据库中的每个图像都有字段“Order”,它影响页面上图像的显示顺序。我正在寻找改变这个订单的解决方案。

4 个解决方案

#1

You can replace the elements outerHTML like this:

您可以像这样替换outerHTML元素:

 function arrow_change(el, fw) {
    var id = el.parentElement.parentElement.id;
    var id_number = eval(id.substr(3))
    var present_div = $('#ID_' + id_number + " div").get(0);//get(0) returns first DOM Element
    id_number = id_number + fw //fw is either 1 or -1;
    var next_div = $('#ID_' + id_number + " div").get(0);
    var present_html = present_div.outerHTML;
    var next_html = next_div.outerHTML;
    present_div.outerHTML = next_html;
    next_div.outerHTML = present_html;   
}

Specify parameter el with this and fw with either 1 or -1 depending on right or left

使用此参数指定el,使用1或-1指定fw,具体取决于右侧或左侧

EX: onclick="arrow_change(this, 1)" is for a shift to the right.

EX:onclick =“arrow_change(this,1)”用于向右移动。

Demo: https://codecanister.com/Project/d547eed9/1/fullscreen/b

#2

The reason why the second image is not being updated is that you use replaceWith. You can change it for example with html() You can also improve the function you have by adding a second parameter to calculate the id as the only difference between arrow_left and arrow_right is the adding or subtracting 1.

第二个图像未更新的原因是您使用replaceWith。您可以更改它,例如使用html()您还可以通过添加第二个参数来计算id来改进您的功能,因为arrow_left和arrow_right之间的唯一区别是加1或减1。

function swapImage(shouldAddOne) {
  var id = $(event.target).parents('.portfolio-item').first().attr('id');
  id = id.split('_');
  id = id[id.length-1];
  id = parseInt(id, 10);
  var present_div = $('#ID_' + id)
  var present_div_html = present_div.html();
  id = shouldAddOne ? id + 1 : id - 1;
  var next_div = $('#ID_' + id);
  var next_div_html = next_div.html();

  $(present_div).html(next_div_html); 
  $(next_div).html(present_div_html);
}

And you can use it in your html like so: swapImage(true) to move right and swapImage(false) to move left

你可以在你的html中使用它,如下所示:swapImage(true)向右移动,swapImage(false)向左移动

In case you rather use a library, you can have a look at this slider

如果您更喜欢使用库,可以查看此滑块

#3

Here's one possible solution which will work with any number of images, using plain vanilla javascript:

这是一个可能的解决方案,可以使用普通的香草javascript与任意数量的图像:

// Count Number of Images
var figures = document.getElementsByTagName('figure');


// Add Buttons to each Image
for (var i = 0; i < figures.length; i++) {

    // Create Move Image Left Button
    var leftSpan = document.createElement('span');
    leftSpan.classList.add('left');
    var leftArrow = document.createTextNode('\u25c0');
    leftSpan.appendChild(leftArrow);

    // Create Move Image Right Button
    var rightSpan = document.createElement('span');
    rightSpan.classList.add('right');
    var rightArrow = document.createTextNode('\u25b6');
    rightSpan.appendChild(rightArrow);

    // Add Left and Right Buttons to each Image
    figures[i].appendChild(leftSpan);
    figures[i].appendChild(rightSpan);
}


// moveLeft Function

function moveLeft() {
    for (var i = 0; i < figures.length; i++) {
        if (figures[i] === this.parentNode) {
            var thisFigure = this.parentNode;
            var currentImage = thisFigure.getElementsByTagName('img')[0];
            var currentFigcaption = thisFigure.getElementsByTagName('figcaption')[0];

            var previousFigure = figures[(i-1)];
            var previousImage = previousFigure.getElementsByTagName('img')[0];
            var previousFigcaption = previousFigure.getElementsByTagName('figcaption')[0];

            thisFigure.insertBefore(previousFigcaption,currentFigcaption);
            previousFigure.insertBefore(currentFigcaption,previousImage);
            thisFigure.insertBefore(previousImage,currentImage);
            previousFigure.insertBefore(currentImage,currentFigcaption);
        }
    }
}


// moveRight Function

function moveRight() {
    for (var i = 0; i < figures.length; i++) {
        if (figures[i] === this.parentNode) {
            var thisFigure = this.parentNode;
            var currentImage = thisFigure.getElementsByTagName('img')[0];
            var currentFigcaption = thisFigure.getElementsByTagName('figcaption')[0];

            var nextFigure = figures[(i+1)];
            var nextImage = nextFigure.getElementsByTagName('img')[0];
            var nextFigcaption = nextFigure.getElementsByTagName('figcaption')[0];

            thisFigure.insertBefore(nextFigcaption,currentFigcaption);
            nextFigure.insertBefore(currentFigcaption,nextImage);
            thisFigure.insertBefore(nextImage,currentImage);
            nextFigure.insertBefore(currentImage,currentFigcaption);
        }
    }
}


// Initialise Buttons
for (var i = 0; i < figures.length; i++) {

    if (i > 0) {
        var leftButton = figures[i].getElementsByClassName('left')[0];
        leftButton.addEventListener('click',moveLeft,false);
    }

    if (i < (figures.length - 1)) {
        var rightButton = figures[i].getElementsByClassName('right')[0];
        rightButton.addEventListener('click',moveRight,false);
    }
}

figure {
display: block;
position: relative;
float: left;
margin: 12px;
width: 200px;
height: 124px;
border: 3px solid rgb(0,0,0);
}

figure img {
display: block;
width: 176px;
height: 76px;
margin: 12px 12px 6px;
border: 1px solid rgb(31,31,31);
}

figcaption {
text-align: center;
}

.left {
display: block;
position: absolute;
left: 0;
bottom: 0;
cursor: pointer;
}

.right {
display: block;
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
}

<figure>
<img src="/image1.png" title="Image 1" alt="Image 1" />
<figcaption>Image 1</figcaption>
</figure>

<figure>
<img src="/image2.png" title="Image 2" alt="Image 2" />
<figcaption>Image 2</figcaption>
</figure>

<figure>
<img src="/image3.png" title="Image 3" alt="Image 3" />
<figcaption>Image 3</figcaption>
</figure>

#4

Here is an example that swaps the cards / grid items. I used a simplified version of the html you posted. I have assumed you are using Bootstrap from the styles you were using and have included it in the demo. If you would like a version that is not based on Bootstrap/jQuery let me know and I would be happy to update this.

这是一个交换卡/网格项的示例。我使用了你发布的html的简化版本。我假设您正在使用您正在使用的样式的Bootstrap,并将其包含在演示中。如果你想要一个不基于Bootstrap / jQuery的版本让我知道,我很乐意更新它。

Since the image placeholder service I used often returns the same image for a given size, I included a number in the card header that is static allowing you to see the swap.

由于我使用的图像占位符服务经常返回给定大小的相同图像,因此我在卡片头中包含了一个静态的数字,允许您查看交换。

I would discourage swapping via updating attributes or other "textual" approaches as you will have a hard time maintaining event handlers on the cards (click tracking for example) if your have them.

我会阻止通过更新属性或其他“文本”方法进行交换,因为如果您拥有它们,您将很难在卡片上维护事件处理程序(例如点击跟踪)。

This approach also does not require maintaining the concept of current, next and previous as the new click handler can easily figure that out for you.

这种方法也不需要维护当前,下一个和上一个的概念,因为新的点击处理程序可以很容易地为您解决这个问题。

I added some additional CSS to "hide" the arrows that did not do anything. You could do the same or remove those style elements. The code will still work correctly with those elements in play.

我添加了一些额外的CSS来“隐藏”没有做任何事情的箭头。您可以执行相同操作或删除这些样式元素。代码仍然可以正常使用这些元素。

There are some similar issues here that you might also be interested in:

这里有一些您可能也感兴趣的类似问题:

• How to move an element into another element

如何将元素移动到另一个元素中

• How to move child element from one parent to another

如何将子元素从一个父元素移动到另一个父元素

function swapChildren($parentA, $parentB) {
  if ($parentA.length === 0 || $parentB.length === 0){ return; }

  var $childrenA = $parentA.children();
  var $childrenB = $parentB.children();

  $parentA.append($childrenB);
  $parentB.append($childrenA);
}

$(".arrowLeft").on("click", function(){
  var $parent = $(this).closest(".portfolio-item");
  swapChildren($parent, $parent.prev());
});

$(".arrowRight").on("click", function(){
  var $parent = $(this).closest(".portfolio-item");
  swapChildren($parent, $parent.next());
});

.portfolio-item .thumbnail { text-align: center; }
.portfolio-item .thumbnail > div { display: inline-block; padding: 0.5em; }
.glyphicon { font-size: 2em; color: red; }

/*  hide arrows that don't do anything */
.row .portfolio-item:first-child .arrowLeft { display: none; }
.row .portfolio-item:last-child .arrowRight { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 1 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 2 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 3 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 4 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 5 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

  </div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>