如何使加号和减号切换适用于所有项目

Question

我用bootstrap做了正负fieldset，这里是代码：

<div class="counter-order">
    <div class="row">
        <div class="col-md-3">
            <form>
                <fieldset>
                    <div class="form-group">
                        <input id="kale" name="kalkal" class="form-control" type="number" value="1" min="1" max="999" />
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

我将代码放在 Jinja {% for %} 逻辑中，以防客户需要多个产品。

这里起作用的只是列表中的第一个产品，例如，如果我制作了其中的 3 个，我会得到这样的值，例如：

笔记本电脑 i5 x3

但是，对于其他产品，我无法达到我想要的数量，我得到了 3 个价值。

我正在使用 Jquery.bind('click')，代码如下：

$('a#process_menu').bind('click', function() {
        $.getJSON('{{url_for("background_process_for_orders")}}', {
          menu_order: $(this).text(), price_order: $('input[name="kalkal"]').val(),
        },

还有 html Dom fieldset 所在的位置：

<a id="process_menu">
    <div class="hover-text">
        <h4 id="title">{{menu_ent.title}}</h4>
        <small id="price">{{menu_ent.price}}</small>
        <div class="clearfix"></div>
        <i class="fa fa-plus add_basket"></i>
        <div class="counter-order">
            <div class="row">
                <div class="col-md-3">
                    <form>
                        <fieldset>
                            <div class="form-group">
                                <input id="kale" name="kalkal" class="form-control" type="number" value="1" min="1" max="999" />
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <img src="../../static/{{menu_ent.path}}" class="img-responsive" alt="..." id="image-menu">
</a>

即使我已经尝试过 document.getElementById('kale').value，也 $(this).value，所有这些都根本不起作用！，我仍然在获取其余产品的第一个元素值或默认值我的案例 1.

如何完成这项工作，请提出任何建议 :) .

Answer 1

ID 在 HTML 页面中必须是唯一的，因为浏览器只能 return 第一个匹配项。

请改用类以避免该问题。您还希望 $(this).val() 而不是 $(this).value 来 jQuery 访问值。

更改（可能需要样式更改才能匹配）：

<a id="process_menu"> 改为 <a class="process_menu">
<h4 id="title"> 改为 <h4 class="title">
<small id="price"> 改为 <small class="price">
图像 ID 从 id="image-menu"> 更改为额外条目
<p id="descr"> 到 <p class="descr">
不要将你的线条包裹在锚点内。您可以从任何元素获取点击事件。将它们全部更改为 div，以避免混淆浏览器。

在此 JSFiddle 中更改 HTML 的示例：https://jsfiddle.net/TrueBlueAussie/5169mnb5/

"row" 上的点击事件需要访问与被点击元素相关的值 (e.e。this)。您可以使用 $(this).find('kalkal') 或者您可以使用 $('.kalkal', this) 将范围应用于搜索。

另外 safer/quicker/shorter（因为它可以最小化）将 this 值保存在点击事件中并在需要时引用它：

例如

$('.process_menu').bind('click', function() {
    var $this = $(this)
    $.getJSON('{{url_for("background_process_for_orders")}}', {
       menu_order: $this.text(), price_order: $('.kalkal', $this).val(),
    },

如何使加号和减号切换适用于所有项目

How to make plus and minus toggle works in all the items

html

jquery

jinja2

twitter-bootstrap

更改（可能需要样式更改才能匹配）：