Drag'n Drop Destroys ID编号方案?

时间:2015-05-22 00:49:56

标签: php jquery css forms drag-and-drop

我有一个包含问卷编辑器的网络应用程序。可能有很多问题;每个都可以有很多答案;每个问题都有两组单选按钮,用于设置各种问题选项。

我正在使用以下ID样式:

id="Q-$questionNumber"
id="Q-$questionNumber-A-$answerNumber"

...其中'$ questionNumber'和'$ answerNumber'被替换为适当的数字。

ID编号方案有两个功能:

  • 点击一个元素后,我的javascript可以检查ID号,找出它所属的问题/答案。
  • 输入元素的名称遵循相同的编号方案。提交表单后,我的PHP代码可以通过检查名称来确定与提交的值相关联的问题编号/答案编号。

当然,当我拖放一个问题时,所有这些ID和名称都需要重新编号。我写了javascript / jQuery,成功重新编写所有内容并正常工作。但它感觉很糟糕。

似乎我可以从所有ID中删除编号方案,只需通过使用jQuery检查其在DOM中的位置,找出问题编号/答案编号的一切。但似乎我仍然需要在输入元素名称上使用编号方案,以便我在服务器上的PHP代码可以告诉各种提交的表单元素属于哪个问题编号/答案编号。

有更好的方法吗?

根据Bankzilla的要求,

更新 。这是一些示例HTML。这是一个问题。每个文档都可以有很多问题,每个问题都有很多答案。

<div id="Q-1" class="QuestionGroup ui-draggable">
    <br>
    <h2 id="QuestionText-Q-1">
        Question #1&nbsp;&nbsp;
        <input type="text" name="questionText-Q-1" value="" id="questionText-Q-1" class="questionText" maxlength="256" size="70">
    </h2>
    <div class="containerForAnswers">
        <p class="answerPar">
            <span class="answerLabel answerLabelinEditView">#1:</span>
            <input type="text" name="Q-1-A-1" value="" id="Q-1-A-1" class="answer answer-Q-1" maxlength="256" size="70">
        </p>
        <p class="answerPar">
            <span class="answerLabel answerLabelinEditView">#2:</span>
            <input type="text" name="Q-1-A-2" value="" id="Q-1-A-2" class="answer answer-Q-1" maxlength="256" size="70">
        </p>
        <p class="answerPar">
            <span class="answerLabel answerLabelinEditView">#3:</span>
            <input type="text" name="Q-1-A-3" value="" id="Q-1-A-3" class="answer answer-Q-1" maxlength="256" size="70">
        </p>
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

不确定这是否有帮助,但您实际上可以在输入中使用数组。使您的案例中的结构问题/答案更容易,您不必担心编号。

<input name="Q[1][text]"/>
<input name="Q[1][answers][]" value="number 1"/>
<input name="Q[1][answers][]" value="number 2"/>

当你有多个Q[1][answers][]时,它会像数组索引0,1,2,3,4那样堆叠它们。

如果您要将上述内容转储出去,它将会像

一样
var_dump($_POST);
array(
    'Q' => array(
        1 => (
            'text' => '',
            answers => array(
                0 => 'number 1'
                1 => 'number 2'
            )
        )
    )
)

现在当你拖动一个下降时,你只需要找到问题ID,而不是答案的顺序。

答案 1 :(得分:0)

在研究了这个之后,我想我下次可能会尝试这样的事情:完全从所有表单元素名称和ID中留下问题编号/答案编号标识符。提交表单时,将通过jQuery将问题编号/答案编号标识符添加到所有表单元素。这样我就不必在拖放,插入,剪切/粘贴等过程中处理任何问题编号/答案编号标识符的重编号。