在jQuery中独立工作的div [英] independently working div in Jquery

问题描述

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

I am trying to make an independently working div which has a form inside of it.

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

I use jquery to calculate the price of a product depending of the user's selections in the form. However the user is able to add multiple items in his 'cart' so the form is duplicated to another div. The problem is that the calculation pattern can't separate these two divs and the calculation will be incorrect. The form is also interactive so it will be generated by the user's input. This is really complex set and renaming every variable by the 'product number' doesn't sound really efficient to me.

我有点卡在这里，我真的不知道如何解决这个问题.我有一个想法，如果我将一个iframe放入div并在其中加载表单及其计算脚本，然后使用post命令将产品价格转移到主页面"以计算总价怎么办?用户想要的所有产品中的全部.

I'm kind of stuck here and i don't really know how to solve this problem. I had an idea that what if I put an iframe inside of the div and load my form and its calculation script inside of it, and then use post command to transfer the price of the product to the 'main page' to calculate the total price of all of the products the user wanted.

但是，jQuery脚本似乎无法在这些iframe中独立运行，但它们仍然具有连接性，因此它们会相互破坏.

However it seems that jQuery scripts doesn't work independently inside of these iframes, they still have connection so they broke each other.

我将感谢您提出的任何建议并帮助您解决此问题！

i will appreciate any kind of suggestions and help to solve this matter, thank you!

这是到目前为止的代码

在这里尸体

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的功能.

it also has a function that allows the user to remove the inserted div.

这是产品表格中仅有的几行

Here's just few lines from the 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()所选变量

I translated all of the variables so they may not function correctly since i didn't test the translated version. So the problem is, if i try to make selections in the second generated div it wont even alert() the selected variable

推荐答案

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

There are two problems with this code: You say somewhere "I translated all of the variables so they may not function correctly since i didn't test the translated version. So the problem is, if i try to make selections in the second generated div it wont even alert() the selected variable". This is because event handlers are attached to elements that are in the DOM at that specific moment. To get it to work for all elements, use event delegation:

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

您的另一个问题是我的问题简而言之:即使我在第二个div中使用了相同的变量名，也有一种方法可以限制jquery仅在特定的div中起作用" .您可以使用this变量来访问在其上调用了单击的元素.通过此元素，您可以根据需要遍历DOM，例如使用.parent().

Your other question is "My question in a nutshell: Is there a way to restrict jquery to function only in certain div even though i use the same variable names in the second div ". You can use the this variable to access the element the click was invoked on. From this element you can traverse the DOM if needed, for example with .parent().

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

这篇关于在jQuery中独立工作的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！