如何在for循环中动态更改html Id的值

时间:2018-02-20 18:21:21

标签: javascript

我试图从隐藏的html输入中获取产品ID的值,以便我可以在JavaScript函数中使用它

我用来显示带有属性的产品的Html代码

{% for produit in produits %}
        <li class="first product has-post-thumbnail">
            <a href="#">
                <img src="{{asset('public/images/'~produit.getImage())}}" 
                     class="attachment-shop_catalog" 
                     alt="The Zoomer Robot Dog Toy   1"/>
                <h3>{{ produit.getNom() }} {{ produit.id }}</h3>
                <span class="price">
                    <span class="amount">{{produit.getPrix() }}</span>
                </span>
                <input id='inpt".{{ produit.id }}."' type="hidden" value="{{ produit.id }}">
            </a>
            <a  rel="nofollow" id="slim" class="button 
                add_to_cart_button product_type_simple" 
                onclick="ajouter()">Add to cart</a>
        </li>

动态购物中添加的JavaScript函数

<script>
    var ajouter = (function() {
        var executed = false;
        return function() {
            if (!executed) {
                executed = true;
                var
                    input = document.getElementById('inpt7').value;

                var urlEdit = "{{ 
                path('ajouterAuPanier', {
                    'id': "id"
                })
            }
        }
        ";

        urlEdit = urlEdit.replace("id", input);
        $.ajax({
            method: 'POST',
            url: urlEdit,
            ifModified: true,
            success: function() {

                //document.getElementById('spam').innerText = "+1";                                                                  
                console.log("ggg");
                alert("ff");
            }
        });
        // 
        setTimeout(check_demande, 5000);
    }
    };
    })();
</script>

1 个答案:

答案 0 :(得分:0)

试试这个, 首先,请务必删除隐藏字段ID中的其他引号,使其看起来与此

完全相同
    <input id='inpt{{ produit.id }}' type="hidden" value="{{ produit.id }}">

确保在评估{{}}表达式后运行脚本以从字段中读取值。如有必要,请将脚本标记放在相同的html页面的底部。确保以这种方式编写它以使用 eval() javascript函数读取值

    <script type="text/javascript">
        var x = document.getElementById('inpt{{produit.id}}');
        console.log(eval(x.value));
    </script>

在引用html元素id时,您必须编写相同的表达式。 希望这能解决你的问题。谢谢!