为列表项分配新的 id/class答案

【问题标题】：assigning new id/class to a list item为列表项分配新的 id/class
【发布时间】：2014-01-07 09:04:34
【问题描述】：

我正在使用一个 Jquery 可排序列表，该列表将两个项目相互替换。每个<li> 都有一个唯一的id 和name，值是从一个php 文件中获取的。

HTML 示例：

<ul id="sections" class="ui-sortable">
   <li id="one" name="one" value="<?php echo $forms[0]; ?>" class="<?php echo $forms[0]; ?>">one</li>
   <li id="onea" name="one_a" value="<?php echo $forms[1]; ?>" class="<?php echo $forms[1]; ?>"> two</li>
   <li id="oneb" name="one_b" value="<?php echo $forms[2]; ?>" class="<?php echo $forms[2]; ?>">three</li>
   <li id="two" name="two" value="<?php echo $forms[3]; ?>" class="<?php echo $forms[3]; ?>"> four  </li>
   <li id="twoa" name="two_a" value="<?php echo $forms[4]; ?>" class="<?php echo $forms[4]; ?>">five</li>
   <li id="twob" name="two_b" value="<?php echo $forms[5]; ?>" class="<?php echo $forms[5]; ?>"> six </li>
</ul>

include() php 文件（示例）：

<?php
$forms = array('fish','bird','tiger','dog','cat','elephant');
?>

现在使用$( "#sections" ).sortable({... 方法，我可以将<li>six</li> 替换为<li>two</li>。在这种情况下，这意味着将bird 与elephant 交换。

问题是当我在<form> 应用程序中使用它并将POST 它用于example.php 文件时，$_POST 变量正在发布其原始顺序。

所以在这种情况下$_POST['one-a']; 仍然返回bird 而不是elephant。我在浏览器上使用了检查元素，发现id 和name 正在随着交换移动。所以#onea 和#twob 也移动了。

我想要做的是保持id 和name 的顺序，并且只在进行交换时更改value。

因此在这种情况下，elephant 将发布为其新的 id 的 onea 和 name 的 one_a。

这可能吗？

感谢您的帮助。

【问题讨论】：

为什么不在值元素中传递带有下划线和位置编号的名称“bird”？这样你就可以解决你的问题了不是吗？
尝试从 php 本身对其进行排序。比如 $form = sort($form);
这会发生但是因为操作 DOM 不会反射表单提交。它适用于 Ajax 调用。
value 属性在 html 4 中已被弃用，只能与 li 一起用作 html5 中 ol 的子项 - See this
@Pete 我也尝试使用<input> 和<div> 标签，但同样的事情一直在发生。 @Goiku 所以你的意思是<?php echo $forms[1;]?>"_2" 或者我没有正确关注你。 @CJ Ramki 我不明白你让 php 解决的意思。

标签： javascript php jquery jquery-ui-sortable

【解决方案1】：

我能够利用一种变通方法来获取当前的value。我使用 Jquery 和 $.ajax() 在各种 if/else 语句之后发布了 data。

所以基本上是这样的；

JS：

var firstone = $('#sections #one');
var firstoneextra = firstone.hasClass("ui-selected");

if (firstoneextra){
    var newone = //take the new selected value.
}else{
    var newone = //keep the value it has already.
}...

以及在通过$.ajax() 调用处理数据时；

（样本）：

data: 'one=' + newone ...

如果它被选中，它将要么是 POST 新值，要么是 POST 它已经开始的值。

【讨论】：