Question

早上好，

我建立了一个相当简单的系统，可以让我构建＆＃39;使用php和jQuery的电子邮件。

页面运行1-20循环，每个数字都有一个包含数字的表格和每个数字旁边的复选框。选中此复选框后，会出现第二个表格，其中包含下拉列表，以便我选择“＆＃39; type＆＃39;每个部分所需的内容。

有多种选择可供选择，例如： 1个图像，2个图像，文本块等 - 一旦选定，一组表单字段将与您选择的选项无关。为表单提供图像名称，alt文本，URL等，然后按下提交按钮，内容将被输入到生成html的另一个页面。

最终结果可能是：

section_1：1 image（header.jpg） - 转到主页

section_2：1 image（sale.jpg） - 转到销售页面

section_3：1 image（new.jpg） - 转到新页面

第4 - 20节：未经检查，因此内容仍然隐藏，变量未通过。

我希望能够使用sortable重新排序这些部分，但在后台更新了id。

所以，在上面的例子中，可见，我有：

<input type="checkbox" id="Section_1_Checkbox" name="Section_1_Checkbox" value="yes">

然后是选择：

<select id="Section_1_Select" name="Section_1_Select">
    <option value="Section_1_hide">please choose</option>
    <option value="Section_1_main" selected="">one image</option>
    <option value="Section_1_twoup">two images</option>
    <option value="Section_1_text">text box</option>
    <option value="Section_1_gap">add a gap</option>
    .....
</select>

然后：

<table width="100%" border="0" cellpadding="5" cellspacing="0" class="show_Section_1_main" style="display:block;" shown="shown">
    <tbody>
        <tr>
            <td class="formstyle mainstyle" valign="top">
                <label for="Section_1_main_image_gap">px gap below image</label><input type="text" size="2" name="Section_1_main_image_gap" id="Section_1_main_image_gap" value="0" class="otherfield">
                <label for="Section_1_main_image_gap2">px gap above image</label><input type="text" size="2" name="Section_1_main_image_gap2" id="Section_1_main_image_gap2" value="0" class="otherfield"><br> 
                <br>
                <div style="width:604px; float:left;">

                    <img id="Section_1_main_image_box" src="mailer_images/header.jpg" style="max-width:594px; max-height:250px;">
                    <br>
                    <label for="Section_1_main_image">paste image name here</label><br>
                    <input type="text" size="77" name="Section_1_main_image" id="Section_1_main_image" value="header.jpg" class="imagechange">
                    <br>
                    <label for="Section_1_main_image_url">full url</label><br>
                    <input type="text" size="77" name="Section_1_main_image_url" id="Section_1_main_image_url" value="http://www.urlhomepage.com" class="otherfield">
                    <br>
                    <label for="Section_1_main_image_alt">alt text</label><br>
                    <input type="text" size="77" name="Section_1_main_image_alt" id="Section_1_main_image_alt" value="alt text for homepage" class="otherfield">
                </div>
            </td>
        </tr>
    </tbody>
</table>

我看过各种各样的例子和jsFiddles，但对jQuery来说还是比较新的，我有点迷失......

所以基本问题是：

如果我将Section_3移到顶部，如何更改所有其他字段（包括隐藏字段）的ID，以便我的部分仍然按照1 - 20的顺序传递，但内容已经改变。

很抱歉，如果这没有意义。很高兴回答任何问题。

提前致谢，

和Rachael

Answer 1

这里是基于您在评论中发布的示例的fiddle解决方案。

var listElements = $('.sortable li');
// iterate through all the list items
for(var i = 0; i < listElements.length; i++){
    // save the children elements of the current list element
    var children = $(listElements[i]).children();
    // change the id of the list element
    $(listElements[i]).attr('id', i+1);
    // change the text of the list element
    $(listElements[i]).text('item ' + (i+1));
    // put the children back (changing text deleted them)
    $(listElements[i]).append(children);
    // change the id and the value of the input element
    $(listElements[i]).children('input').attr({
        id: 'position_' + (i+1), 
        value: i+1
    });
}

基本上，当排序完成时，正在调用可排序小部件的update事件。在其中，您应该遍历要更改的元素，并使用attr和/ text方法更改它们。

编辑：您可以将旧ID拆分为数组，然后将其从该数组重构为新数组。当然，在这种情况下，所有ID都需要具有相同的结构。

var oldId = $(listElements[i]).children('input').attr('id').split('_');
$(listElements[i]).children('input').attr({
    id: oldId[0] + '_' + (i+1) + '_' + oldId[2], 
    value: i+1
});

可排序和更新多个隐藏字段

1 个答案: