Javascript 和 Html 加载两次(表单字段)我如何知道它属于哪个元素？

Question

HTML:

下面的字段正在多次动态加载。

<div>
<label><?php echo $form->label; ?>
<select 
       name=<?php echo $form->name; ?>
       idx=<?php echo $form->entity; ?>
>
<option value="<?php echo $form->option()->value; ?>"><?php echo $form->option()->name; ?></option>
</select>

<td>
<a href="#" id="addnew"  onclick="onOffButton('addfield', 'addbtn'); return false;">[Open] Add New</a>

<span id="addfield">
   <input name="newstuff type="text"></input>
</span>

<a href="#do-something" id="addbtn">Click to add</a>
</td>
</div>

JAVASCRIPT:

我可以使下面的脚本加载两次或一次。如果我加载一次，那么它只适用于第一个字段。如果我加载它两次，那么它只适用于第二个字段。

<script type="text/javascript">
    var onix = false;
    function onOffButton(id, text) {

        var select_id = $("#addfield").prevAll('select').attr("idx");
        console.log(select_id);

        if (onix == false) {
            document.getElementById(id).style.display = 'block';
            document.getElementById(text).style.display = 'block';
            document.getElementById("addnew").textContent="[Close] Add New";
            onix = true;                   
        } else if (onix == true) {
            document.getElementById(id).style.display = 'none';
            document.getElementById(text).style.display = 'none';
            document.getElementById("addnew").textContent="[Open] Add New";
            onix = false;                
        }
    }
</script>

摘要

我需要知道addfield部分属于哪个元素。最重要的是，形式->实体。目标是生成一个 GET 链接，如下所示:localhost/$form->entity/create/[value-of-newstuff]

我尝试在外部文件上设置数组。这确实有效，但我不知道该怎么办。

我也尝试过使用 <?php echo rand(); ?>在所有属性上。结果符合预期，当 javascript 加载一次时，它仅适用于第一个字段，加载两次时，仅适用于第二个字段。

如何克服这个障碍？

Answer 1

我暂时解决了

以一种非常粗糙的方式，可能有一种更漂亮的方式，但这就是我想出的解决方法。

基本上我是这样开始这个领域的:

<?php $onix = rand(); ?>

然后我把这个废话打在了 html 的每个 id 上。在javascript方面，我基本上到处都打它。它像 mofo 一样丑陋，但它的作用就像一个魅力:

<script type="text/javascript">
    var onix<?php echo $onix; ?> = false;
    function onOffButton<?php echo $onix; ?>(id<?php echo $onix; ?>, text<?php echo $onix; ?>) {

        var select_id<?php echo $onix; ?> = $("#addfield<?php echo $onix; ?>").prevAll('select').attr("idx<?php echo $onix; ?>");
        console.log(select_id<?php echo $onix; ?>);

        if (onix<?php echo $onix; ?> == false) {
            document.getElementById(id<?php echo $onix; ?>).style.display = 'block';
            document.getElementById(text<?php echo $onix; ?>).style.display = 'block';
            document.getElementById("addnew<?php echo $onix; ?>").textContent="[Close] Add New";
            onix<?php echo $onix; ?> = true;                   
        } else if (onix<?php echo $onix; ?> == true) {
            document.getElementById(id<?php echo $onix; ?>).style.display = 'none';
            document.getElementById(text<?php echo $onix; ?>).style.display = 'none';
            document.getElementById("addnew<?php echo $onix; ?>").textContent="[Open] Add New";
            onix<?php echo $onix; ?> = false;                
        }
    }
</script>