html标签在点击时使用jquery和ajax向上或向下传输[关闭]

Posted 2023-02-24

【中文标题】html标签在点击时使用jquery和ajax向上或向下传输[关闭]

【英文标题】：html tag transfer it up or down use jquery and ajax when click [closed]

【发布时间】：2013-04-06 00:28:54

【问题描述】：

我的 html 如下：

<div id="line1"> <a>down</a> </div>
<div id="line2"> <a>up</a> <a>down</a> </div>
<div id="line3"> <a>up</a> <a>down</a> </div>
<div id="line4"> <a>up</a> <a>down</a> </div>
<div id="line5"> <a>up</a> </div>

当我单击向上或向下链接时，我希望 div 分别交换。

我不是在寻找拖放功能。

【问题讨论】：

（讽刺）当然，让我花 15 分钟时间为您编写程序……

div 可以互换是什么意思？

是的，其实我用的是菜单管理。

【参考方案1】：

将类添加到您的上/下链接：

<div id="menu">
    <div id="line1"> A <a class='up'>up</a> <a class='down'>down</a></div>
    <div id="line2"> B <a class='up'>up</a> <a class='down'>down</a></div>
    <div id="line3"> C <a class='up'>up</a> <a class='down'>down</a></div>
    <div id="line4"> D <a class='up'>up</a> <a class='down'>down</a></div>
    <div id="line5"> E <a class='up'>up</a> <a class='down'>down</a></div>
</div>

添加 CSS 以隐藏未使用的第一个和最后一个链接：

#menu > div:first-child a:first-child,
#menu > div:last-child  a:last-child  display: none; 

jQuery:

$('#menu').on('click', 'a', function() 
    var divs = $('#menu > div');
    var p = $(this).parent();
    var pos = p.index();

    if($(this).hasClass('up')) 
        p.insertBefore(divs.eq(--pos));
    
    else if($(this).hasClass('down')) 
        p.insertAfter(divs.eq(++pos));
    
);

http://jsfiddle.net/samliew/P4Xaf/

【讨论】：

只给某人代码投反对票，尤其是那些甚至懒得做任何初步研究的人。

+1 给出答案，感谢您帮助人们。

@siride 当然，你的投票是你自己的事，但这不一定是他们的本意。根据答案本身的质量和内容进行投票，而不是围绕其发布的上下文进行投票，总是更可取

@Clive：我认为答案本身很糟糕。只是转储代码并不能真正以增加网站价值的方式回答问题。它以一种不容易学习的方式解决某人的非常具体的问题。我原则上不同意这些类型的答案。

@siride 然后我们同意 :) 我过于关注你评论的第二部分，我的错