首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用jQuery/JS上下切换DIV元素

使用jQuery/JS上下切换DIV元素
EN

Stack Overflow用户
提问于 2012-07-11 15:28:45
回答 2查看 497关注 0票数 0

我正在尝试向上或向下移动动态表单的div元素:

这是我的表格:

代码语言:javascript
运行
复制
  <form name="f_form">
        Order name <input type="text" name="ord" id="order" />

        <div id="fields">
<div id="hid1"><a href="#" id="did1">
<img src="d.jpg" /></a><a href="#" id="uid1">
<img src="u.jpg" /></a><input type="text" name="p_name[]" id="names" />
<input type="text" name="quant[]" id="quant" size="3" />
<input type="text" name="pr[]" id="price" size="10" />
<input type="text" name="sum_a" id="sum" size="10" disabled="disabled"/>
        </div>
<input type="button" name="nauj" id="nau" value="Add item"/><br />
    </div>
    </form>

当我点击"add item“按钮时,JS被调用:

代码语言:javascript
运行
复制
$("#nau").click(function () {
(newdiv = document.createElement('div')).id = "hid"+ (counter + 1) +"";
newdiv.innerHTML = '<a href="#" id="did'+ (counter + 1) +'"><img src="d.jpg" /></a><a href="#" id="uid'+ (counter + 1) +'"><img src="u.jpg" /></a><input type="text" name="p_name[]" id="names" />
<input type="text" name="quant[]" id="quant" size="3" />
<input type="text" name="pr[]" id="price" size="10" />
<input type="text" name="sum_a" id="sum" size="10" disabled="disabled"/><a href="#" id="delete'+ (counter + 1) +'">X</a>';
             document.getElementById('fields').appendChild(newdiv);
             counter++;
});

每个表单域行都有两个箭头(向上和向下)图像:<a href="#" id="did'+ (counter + 1) +'"><img src="d.jpg" /></a><a href="#" id="uid'+ (counter + 1) +'"><img src="u.jpg" /></a>

当我点击箭头时,我需要向上或向下移动表单域的所有行(移动<DIV id=hid..>),尝试这样做,但它不起作用。(上移功能)

代码语言:javascript
运行
复制
$("a[id^='uid']").on('click', function() {
            var numrow = $(this).attr("id");
            numrow = numrow.substr(3);
            var nr = 1;

            sumrow = numrow - nr;
            var eil = 'id=' + numrow;
            numrowas = "#hid"+numrow;
            srowas = "#hid"+sumrow;
                    $(numrowas).before($(srowas));
        });

谢谢你的建议。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-07-11 16:53:34

与@WTK相同的解决方案,使用.prev(),但方法不同。哦,我忍不住做了一些清理工作。)

请参阅http://jsfiddle.net/WmbmF/4/

票数 1
EN

Stack Overflow用户

发布于 2012-07-11 16:39:35

首先,您没有正确使用on() -事件处理程序没有像您预期的那样被绑定。正确的语法应该是:

代码语言:javascript
运行
复制
// "watch for" elements matching selector "a[id^='did']" created inside #fields
$("#fields").on('click', "a[id^='did']", function(e) {...})

其次,您正在尝试对id属性进行操作,以便在要附加当前元素的哪个div之后/之前进行deremine。这很混乱,一种更简洁的方法是使用.next().prev()来确定与所单击的节点相关的下一个或上一个节点。

我创建了一个小提琴作为示例:http://jsfiddle.net/SPgax/22/

就像附注:你的代码很乱,我没有对它采取行动,因为它超出了你的问题的范围。无意冒犯:)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11427677

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档