Question

我想创建一个脚本，它可以提供营养计数的食物表。让我们说每日菜单。当用户点击按钮时，成分会添加到表格中。成分线中有+和 - 按钮可将其数量改为1.

HTML：

<div class="menuContainer">
<div class="foodListContainer">
    <div class="row"></div>
</div>
<div class="buttonsContainer">
    <button value="100,g.,12.6,2.6,68,355">Buckweat</button>
    <button value="1,ps.,6.3,5.7,0.35,78.5">Egg</button>
    <button value="1,sp.,2.8,3.2,4.7,58">Butter</button>
    <button value="100,g.,12.6,2.6,68,355">Meat</button>
</div>

JS：

$(document).ready(function () {

//When user click a button
$(".buttonsContainer button").click(function () {

    //catching the name of food 
    var choosenFood = $(this).text();

    //catching the value of pressed button with info 
    //about this food and making an array with it
    var value = $(this).val();
    var arr = value.split(',');

    //insert div's with info from array
    $($.parseHTML(
        '<div class="name">' + choosenFood + '</div><button class="up">+</button><div class="value">' + arr[0] + '</div><div class="unit">' + arr[1] + '</div><button class="down">-</button><div class="protein">' + arr[2] + '</div><div class="fat">' + arr[3] + '</div><div class="carbs">' + arr[4] + '</div><div class="kkal">' + arr[5] + '</div><br>')).appendTo(".row");

    //trying to change value
    $('.down').click(function () {
        $(this).prev().prev(".value").html(function (i, val) {
            return val * 1 - 1;
        });
    });

    $('.up').click(function () {
        $(this).next(".value").html(function (i, val) {
            return val * 1 + 1;
        });
    });
});

当表中有2行或更多行时，问题就开始了。行数越多，+和 - 按钮的值就越多。你最好在这里看一下：https://jsfiddle.net/ts3n35bq/

我认为，范围存在一些问题。可能，关键的错误是从“appendTo”动作调用“向上”和“向下”动作，似乎这个函数在每一行中重复，直到结束。但是当我试图将它们从那里移除时，它们根本不起作用。

我将不胜感激任何建议或帮助。谢谢！

Answer 1

这应该适合你。

$(document).ready(function () {

    $('body').on('click', '.down', function() {
        $(this).prev().prev(".value").html(function (i, val) {
            return val * 1 - 1;
        });
    });


    $('body').on('click', '.up', function() {
        $(this).next(".value").html(function (i, val) {
            return val * 1 + 1;
        });
    });

    //When user click a button
    $(".buttonsContainer button").click(function () {

        //catching the name of food 
        var choosenFood = $(this).text();
        //catching the value of pressed button with info about this food and making an array with it
        var value = $(this).val();
        var arr = value.split(',');

        //insert div's with info from array
        $($.parseHTML(
            '<div class="name">' + choosenFood + '</div><button class="up">+</button><div class="value">' + arr[0] + '</div><div class="unit">' + arr[1] + '</div><button class="down">-</button><div class="protein">' + arr[2] + '</div><div class="fat">' + arr[3] + '</div><div class="carbs">' + arr[4] + '</div><div class="kkal">' + arr[5] + '</div><br>')).appendTo(".row");

        //trying to change value



    });
});

Answer 2

在点击功能上使用取消绑定

$('.down').unbind().click(function () {
            $(this).prev().prev(".value").html(function (i, val) {
                return val * 1 - 1;
            });
        });

        $('.up').unbind().click(function () {
            alert($(this).next(".value").attr('id'));

            $(this).next(".value").html(function (i, val) {
                return val * 1 + 1;
            });
        });

Answer 3

$(".buttonsContainer").on('click','button',function (){
    //your code
});

Answer 4

而不是：

$(".buttonsContainer button").click(function () {
    ...
});

使用：

$(document).on('click', '.buttonsContainer button', function() {
    ...
});

Answer 5

每次点击向表格添加div时，都会调用$('.down').click()，将事件绑定到所有现有按钮，并使用＆＃34; down＆＃34;类。添加多个行使得单击事件可以将多个处理程序附加到预先存在的按钮。

您可以轻松修复此问题，而无需更改大量代码。而不是直接追加新行，而是先将其保存到变量中，然后将点击处理程序添加到其中的down / up元素中：

var rowString = '<div class="name">' + choosenFood + '</div><button class="up">+</button><div class="value">' + arr[0] + '</div><div class="unit">' + arr[1] + '</div><button class="down">-</button><div class="protein">' + arr[2] + '</div><div class="fat">' + arr[3] + '</div><div class="carbs">' + arr[4] + '</div><div class="kkal">' + arr[5] + '</div><br>';
var newRow = $($.parseHTML(rowString));

newRow.filter(".down").click( function () {
    $(this).prev().prev(".value").html(function (i, val) {
        return val * 1 - 1;
    });
});
newRow.filter(".up").click(function () {
    $(this).next(".value").html(function (i, val) {
        return val * 1 + 1;
    });
});

newRow.appendTo(".row");

如何更改之前由jQuery创建的div的值

5 个答案: