0

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

这是我的表格：

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

当我单击“添加项目”按钮时，调用 JS：

$("#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..>）尝试这样但它确实有效..（向上移动功能）

$("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));
        });

感谢您的建议。

4

2 回答 2

1

首先，您没有on()正确使用 - 事件处理程序没有像您期望的那样绑定。正确的语法是：

// "watch for" elements matching selector "a[id^='did']" created inside #fields
$("#fields").on('click', "a[id^='did']", function(e) {...})

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

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

顺便说一句：你的代码很乱，我没有采取行动，因为它超出了你的问题范围。没有恶意 ：）

于 2012-07-11T08:39:34.950 回答
1

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

见http://jsfiddle.net/WmbmF/4/

于 2012-07-11T08:53:33.867 回答