如何互换所有div

时间：2016-07-10 20:26:55

标签： javascript jquery html css

这就是我的画廊的样子： images gallery

我需要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>

我不知道该怎么样。如果有人可以帮助我？ Mabye有人知道一些其他的解决方案，但没有拖放 - 我测试了jQuery UI可排序，它不能很好地工作。

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

4 个答案:

答案 0 :(得分：1)

您可以像这样替换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;   
}

使用el和this指定参数fw，1或-1取决于右侧或左侧

EX：onclick="arrow_change(this, 1)"用于向右移动。

演示： https://codecanister.com/Project/d547eed9/1/fullscreen/b

答案 1 :(得分：0)

第二张图片未更新的原因是您使用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);
}

你可以在你的html中使用它：swapImage(true)向右移动，swapImage(false)向左移动

如果您更喜欢使用库，可以查看this slider

答案 2 :(得分：0)

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

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

我会阻止通过更新属性或其他“文本”方法进行交换，因为如果您有卡片上的事件处理程序（例如点击跟踪），则会很难。

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

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

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

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>

答案 3 :(得分：0)

这是一个可能的解决方案，可以使用普通的香草javascript来处理任意数量的图像：

＆＃13;
＆＃13; 
// 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);
    }
}
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题