Question

我使用 bootstrap 制作了加号和减号字段集，以下是代码：

<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

但是，对于其他产品，我无法赚取我想要的数量。

使用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 ，其中放置了字段集：

<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

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

使用类来避免该问题。您还希望$(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/

“行”上的click事件需要访问相对于单击元素的值（例如this）。您可以使用$(this).find('kalkal')，也可以使用$('.kalkal', this)将范围应用于搜索。

更安全/更快/更短（因为它可以最小化）将this值保存在click事件中并在需要时引用：

e.g。

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

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

1 个答案:

更改（可能需要更改样式）：