关于javascript：如何互换所有div

How swap all divs with each other

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

我需要javascript/jquery函数："arrow_left()"和"arrow_right"来更改带图像的div的位置(所有div都在中间)。例如，当我单击"图像2"上的右箭头时，"图像2"应该与"图像3"交换它们的位置。下面我介绍如何将"图像2"与"图像3"交换，使"图像2"为空("图像3"将被删除)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

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
}



<img id='1' class='img-responsive' src='path/to/img'>



<img id='2' class='img-responsive' src='path/to/img'>



<img id='3' class='img-responsive' src='path/to/img'>



<img id='4' class='img-responsive' src='path/to/img'>



<img id='5' class='img-responsive' src='path/to/img'>



<img id='6' class='img-responsive' src='path/to/img'>



<img id='7' class='img-responsive' src='path/to/img'>

我不知道那有多好。有人能帮我吗？Mabye有人知道其他一些解决方案，但没有拖拽-我测试了jquery ui可排序，但它工作得不太好。

我不需要滑杆。我需要在页面中显示所有图像并更改它们的顺序(在管理员面板中)。数据库中的每个图像都有字段"顺序"，这会影响页面上图像的显示顺序。我正在寻找解决方案，以便很好地更改此订单。

相关讨论

您可以这样替换outerhtml元素：

1
2
3
4
5
6
7
8
9
10
11

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;
}

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

例：onclick="arrow_change(this, 1)"是右移。

演示：https://codeanister.com/project/d547eed9/1/fullscreen/b

相关讨论

这里有一个可能的解决方案，可以使用任何数量的图片，使用普通的普通JavaScript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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>

相关讨论

下面是交换卡/网格项的示例。我使用了您发布的HTML的简化版本。我假设您使用的是您使用的样式中的引导程序，并将其包含在演示中。如果您想要一个不基于bootstrap/jquery的版本，请告诉我，我很乐意更新这个版本。

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

我不鼓励通过更新属性或其他"文本"方法进行交换，因为如果您有卡片，则很难在卡片上维护事件处理程序(例如单击跟踪)。

这种方法也不需要维护current、next和previous的概念，因为新的单击处理程序可以很容易地为您解决这个问题。

我添加了一些额外的CSS来"隐藏"没有做任何事情的箭头。您也可以这样做，或者删除那些样式元素。代码仍然可以在这些元素运行时正常工作。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1
2
3
4
5
6
7

.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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

相关讨论

第二个映像没有更新的原因是您使用了replaceWith。您可以更改它，例如使用EDOCX1[1]您还可以通过添加第二个参数来计算ID来改进您拥有的函数，因为箭头"左"和"右"之间的唯一区别是加或减1。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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)向左移动

如果您更愿意使用库，可以查看此滑块

相关讨论