那就是我的画廊的样子:
我需要javascript / jquery函数:“arrow_left()”和“arrow_right”,用于更改带图片的div的位置(所有div的中间都包含所有div)。例如,当我单击“图像2”上的向右箭头时,“图像2”应与“图像3”交换它们的位置。
下面,我介绍如何将“图像2”与“图像3”交换,而将“图像2”留空(“图像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”字段,该字段会影响页面上图像的显示顺序。我正在寻找解决方案以便对此订单进行更改。
最佳答案
您可以像这样替换元素externalHTML:
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
例如:
onclick="arrow_change(this, 1)"
用于向右移动。演示:
https://codecanister.com/Project/d547eed9/1/fullscreen/b