Question

我正在尝试创建一个独立工作的div，其中包含一个表单。

我使用jquery根据用户在表单中的选择来计算产品的价格。但是，用户可以在他的“购物车”中添加多个项目，以便将表单复制到另一个div。问题是计算模式不能将这两个div分开，计算结果不正确。表单也是交互式的，因此它将由用户的输入生成。这是非常复杂的设置，并且通过'产品编号'重命名每个变量对我来说听起来并不是很有效。

我有点被困在这里，我真的不知道如何解决这个问题。我有一个想法，如果我把一个iframe放在div里面并加载我的表单及其计算脚本，然后使用post命令将产品的价格转移到'主页'来计算总价用户想要的所有产品。

然而，似乎jQuery脚本在这些iframe中不能独立工作，它们仍然具有连接，因此它们相互破坏。

我将感谢任何建议并帮助解决此事，谢谢！

这是迄今为止的代码

继承人的身体

var productNumber = 1;

<div id="div_structure">

</div>
<button id="newProduct" >Add new product</button><br \>

添加新项目

<!-- language: lang-javascript -->

    $('#newProduct').click(function () 
    { 
        $('<div id="productNo'+productNumber+'">')
         .appendTo('#div_structure')
         .html('<label onclick="$(\'#div_productNo'+productNumber+'\').slideToggle()">Product '+productNumber +' </label>'+
               '<button onclick="$(\'#product'+productNumber+'\').remove()">Remove</button>');
        $('<div id="div_product'+productNumber+'" style="display: none;">').appendTo('#product'+productNumber+'');
$('<iframe src="productform.html" seamless frameborder="0" crolling="no" height="600" width="1000">').appendTo('#div_product'+productNumber+'');
        productNumber++;
    });

它还有一个允许用户删除插入的div的功能。

这里只是productform

中的几行

$(document).ready(function()
{
    $('#productCalculation').change(function () 
    {
        shape = $('input[name=productShape]:checked', '#productCalculation').val();
        alert(shape);
    });
});

<form id="productCalculation">
<div id="div_productShape" class="product1">
<h1>Select the shape of the product</h1>
    <input type="radio" name="productShape" value="r1">R1</input><br \>
    <input type="radio" name="productShape" value="r2">R2</input><br \>
    <input type="radio" name="productShape" value="r3">R3</input><br \>
</div>
.
.
.
</form>

我翻译了所有变量，因此我们可能无法正常运行，因为我没有测试翻译版本。所以问题是，如果我尝试在第二个生成的div中进行选择，它甚至不会alert()所选变量

Answer 1

这段代码存在两个问题：你说某处“我翻译了所有变量，因此我们可能无法正常运行，因为我没有测试翻译版本。所以问题是，如果我试图制作在第二个生成的div中选择它甚至不会警告（）所选变量“。这是因为事件处理程序附加到特定时刻DOM中的元素。要使其适用于所有元素，请使用事件委派：

$(document).ready(function()
{
    $(document).on( 'change', '#productCalculation', function () 
    {
        shape = $('input[name=productShape]:checked', '#productCalculation').val();
        alert(shape);
    });
});

你的另一个问题是“我的问题简而言之：有没有办法限制jquery仅在某个div中起作用，即使我在第二个div中使用相同的变量名”。您可以使用this变量来访问调用click的元素。如果需要，您可以从此元素遍历DOM，例如使用.parent()。

$('div').on( 'change', function( e ) {
    console.log( $(this).val() );
} );

在Jquery独立工作div

1 个答案: