Fatal编程技术网
  • javascript/
  • Javascript 如何将用于数学的选中输入值用作克隆的div元素的一部分

Javascript 如何将用于数学的选中输入值用作克隆的div元素的一部分

javascript jquery html

Javascript 如何将用于数学的选中输入值用作克隆的div元素的一部分,javascript,jquery,html,Javascript,Jquery,Html,我已经编写了一个脚本，可以根据用户的需要克隆某个div。在div中有三个复选框输入选项，每个选项都是一个数值。我希望脚本允许用户选择一个复选框，然后该值将反映在另一个输入空间中，添加的每个值将用逗号分隔 棘手的部分是，应该为每个克隆执行此操作，并且每个复选框都具有相同的类名，脚本应该写入这些类名。我意识到使用唯一id会更好，但我希望for循环可以对特定类下的任意数量的复选框执行此操作 以下是html脚本： <style> .hidden { display: none; }

我已经编写了一个脚本，可以根据用户的需要克隆某个div。在div中有三个复选框输入选项，每个选项都是一个数值。我希望脚本允许用户选择一个复选框，然后该值将反映在另一个输入空间中，添加的每个值将用逗号分隔

棘手的部分是，应该为每个克隆执行此操作，并且每个复选框都具有相同的类名，脚本应该写入这些类名。我意识到使用唯一id会更好，但我希望for循环可以对特定类下的任意数量的复选框执行此操作

以下是html脚本：

<style>
.hidden {
    display: none;
}
</style>

<body>
    <h2>Test</h2>

    <button id="add">Add</button>

    <div class="test hidden">       

        <div class="user_input1">
            <label>Input1</label>
            <input class="input1" type="text" required>
            <label>Input2</label>
            <input type="text" name="value2" required>

            <div class="user_input2">
                <table>
                    <thead>
                        <tr>
                            <th>Pick Option</th>                    
                        </tr>                                   
                    </thead>
                    <tbody>    
                        <tr id="append"> 
                            <td><input class="test" type="checkbox" name="test" value="1">Test1</td>  
                            <td><input class="test" type="checkbox" name="test" value="2">Test2</td> 
                            <td><input class="test" type="checkbox" name="test" value="3">Test3</td>            
                        </tr>     
                    </tbody>
                </table>    
                <input type="text" id="insert" name="check">
                <button class="hidden" id="testbtn">Calc</button>   
            </div>
        </div>


    </div>
    <form action="server/server.php" method="POST">
        <div class="paste">     
        </div>
        <button type="submit" name="insert_res">Submit</button>
    </form> 
</body>
我认为应该对每个复选框元素使用for循环，并
this
来指定每个单独的克隆，但我不知道在哪里或如何做到这一点。请帮忙

我假设您已经知道如何获取附加所需的dom元素的引用，以及如何创建和附加元素

您是对的，您可以在数据集上循环并生成具有唯一id的dom元素，以便以后在将新值传输到输入时可以引用它们

...forEach((obj, index) => {
  (produce tr dom element here)
  (produce three inputs, give all unique-identifier)
  oneOfThreeInputs.setAttribute('unique-identifier', index); // can set to whatever you want, really
  (proceed to creating your inputs and appending them to the tr dom element)
  targetInputDomElementChild.setAttribute('id', `unique-input-${index}`); // same here, doesn't have to be class
});
请注意，我正在使用模板字符串将索引编号值与其余字符串合并。从那时起，您可以引用索引以引用正确的输入，也可以在keyUp事件处理程序中使用jquery：

function keyUpEventHandler($event) {
  const index = $(this).attr('unique-identifier');

  const targetInput = $(`#unique-input-${index}`)

  // do stuff with targetInput
}
我创建了一个提琴，向您展示使用上述信息可以选择的路线：

请注意，当您单击复选框时，在控制台中您将看到指定该复选框集的变量编号。您可以使用该特定的数字来获取需要添加到的输入，并计算值

当然，您仍然需要验证它是否被选中，以便从输入中删除。

谢谢您的帮助，但您是否介意再详细说明一下。恐怕你把我弄糊涂了，因为我没能把它和我自己的剧本联系起来。我的哪一部分应该互换等等…我相信你会有很多改变。问题是，似乎您正在将keyup事件放在包装器div上，但如果您打算以“val1，val2，val3”的方式将所选输入的值添加到另一个输入中，我认为这不起作用。在我看来，您的每个输入都需要分配一个单击事件处理程序才能正常工作。用小提琴更新我的答案，让您走上正确的轨道。这很好。谢谢，但如果您取消选中某个选项，它也会附加一个值？是的，就像我说的，您只需检查复选框是选中还是未选中，而不是执行“combo”逻辑，您必须拼接出字符串的该部分，并以相同的方式分配它。 
function keyUpEventHandler($event) {
  const index = $(this).attr('unique-identifier');

  const targetInput = $(`#unique-input-${index}`)

  // do stuff with targetInput
}