0

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

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

我有点卡在这里，我真的不知道如何解决这个问题。我有一个想法，如果我在 div 中放置一个 iframe 并在其中加载我的表单及其计算脚本，然后使用 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()选择变量

4

1 回答 1

1

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

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

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

$('div').on( 'change', function( e ) {
    console.log( $(this).val() );
} );
于 2013-08-31T11:27:35.040 回答