gpt4 book ai didi

javascript - 使用 Javascript/Jquery 上下移动 div 更改 ID 号

转载 作者:行者123 更新时间:2023-11-28 03:11:27 25 4
gpt4 key购买 nike

我希望能够在上下移动 div 时更改 ID,这样我就可以将它们的编号提交给 MySQLi...

所以基本上来自

<div id="1" class='col1'>1</div>
<div id="2" class='col2'>2</div>
<div id="3" class='col3'>3</div>
<div id="4" class='col4'>4</div>
<div id="5" class='col5'>5</div>

<div id="5" class='col1'>1</div>
<div id="2" class='col2'>2</div>
<div id="4" class='col3'>3</div>
<div id="1" class='col4'>4</div>
<div id="3" class='col5'>5</div>

或者类似的东西...

HTML

    <div id='items'>
<div id="1" class='col1'>1</div>
<div id="2" class='col2'>2</div>
<div id="3" class='col3'>3</div>
<div id="4" class='col4'>4</div>
<div id="5" class='col5'>5</div>

</div>

<a href="#" id="up">Up</a>
<a href="#" id="down">Down</a>

JS

    $(document).ready(function(){
var selected=0;

var itemlist = $('#items');
var len=$(itemlist).children().length;

$("#items div").click(function(){
selected= $(this).index();
alert("Selected item is " + $(this).text());
});


$("#up").click(function(e){
e.preventDefault();
if(selected>0)
{
jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
selected=selected-1;
}
});

$("#down").click(function(e){
e.preventDefault();
if(selected < len)
{
jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
selected=selected+1;
}
});




});

CSS

    #items div{
width:100px;
height:20px;
border:1px solid #000;
margin-top:2px;
text-align:center
}
div .col1{
background-color:#000;
color:#fff
}
.col2{
background-color:#0f0;
}
.col3{
background-color:#00f;
color:#fff
}
.col4{
background-color:#f00;
color:#fff
}
.col5{
background-color:#ff0;

}

一切都会移动,但不知何故,如果可能的话,我需要它更改 ID,这样它就会按该顺序排序。

这可能吗?如果可以的话请有人帮助我。

最佳答案

您可以获取项目列表或案例中的歌曲,然后在更改项目位置时迭代每个项目。这样,您可以保留元素 ID,但可以在需要时在服务器端存储准确的排序号。在 JS 中你可以做这样的事情:

$(document).ready(function(){
var selected=0;

var itemlist = $('#items');
var len=$(itemlist).children().length;

$("#items div").click(function(){
selected= $(this).index();
alert("Selected item is " + $(this).text());
});


$("#up").click(function(e){
e.preventDefault();
if(selected>0)
{
jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
selected=selected-1;
changeSortOrder();
}
});

$("#down").click(function(e){
e.preventDefault();
if(selected < len)
{
jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
jQuery($(itemlist).children().eq(selected-1)).attr('data-sort', selected + 1);
selected=selected+1;
changeSortOrder();
}
});
});

function changeSortOrder() {
var listItems = $('#items').children();

for (var item in listItems) {
listItems[item].setAttribute('data-sort', parseInt(item) + 1);
}
}

添加的功能是主要内容。

function changeSortOrder() {
var listItems = $('#items').children();

for (var item in listItems) {
listItems[item].setAttribute('data-sort', parseInt(item) + 1);
}
}

这里发生的事情是,您获取列表中的所有这些项目,然后通过迭代每个项目来重新分配它们的排序号。因此,当您将项目 1 向下移动到位置 2 时,您会看到项目 2 现在将其排序位置设置为 1,而不是 2,对于列表中的每个元素,依此类推。

例如,选择第 1 项并单击 -> 向下后 HTML 的外观如下:

<div id="2" sort="1" class='col'>2</div>
<div id="1" sort="2" class='col1'>1</div>
<div id="3" sort="3" class='col3'>3</div>
<div id="4" sort="4" class='col4'>4</div>
<div id="5" sort="5" class='col5'>5</div>

查看此JS fiddle here一个有效的例子可以更好地说明这一点。

关于javascript - 使用 Javascript/Jquery 上下移动 div 更改 ID 号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60079691/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com