Question

我为我的项目设置了GitHub加上GitHub page。它需要一个设定值，并在按下按钮后减去输入。

脚本应该将最初设置的值作为变量subtract。另一个可变电流定义为当前数字。 newVal定义为current - subtract。将当前值更改为newVal。在更改数字之前使用jQuery反弹效果。

此时效果影响所有数字而不是编辑的数字。

这是我遇到的问题，直到我遇到困难的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Macros Tracker</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="scripts/jquery.jeditable.mini.js"></script>
    <script src="scripts/script.js"></script>
</head>
<body>
    <h1>Track your Macros</h1>
    <div class="wrapper">
        <div id="calories">
            <div class="number"><p>1945</p></div>
            <div class="label"><p>Calories</p></div>
            <input type="text" id="subtract"></input>
            <button>Subtract</button>
        </div>
        <div id="protein">
            <div class="number"><p>200</p></div>
            <div class="label"><p>Protein</p></div>
            <input type="text"></input>
            <button>Subtract</button>
        </div>
        <div id="carbs">
            <div class="number"><p>150</p></div>
            <div class="label"><p>Carbs</p></div>
            <input type="text"></input>
            <button>Subtract</button>
        </div>
        <div id="fats">
            <div class="number"><p>51</p></div>
            <div class="label"><p>Fats</p></div>
            <input type="text"></input>
            <button>Subtract</button>
        </div>
    </div>
</body>
</html>

的script.js

$(document).ready(function(){
    $('button').click(function(){
        var subtract = parseInt($('#subtract').val(), 10);
        var current = parseInt($('.number p').val());
        var newVal = current - subtract; 
        $('.number p').effect('explode');
        $('.number p').html(newVal);
    });
});

Answer 1

$('.number p').html(newVal);将匹配.number p的所有元素的html设置为指定的html。

您需要使用按钮的上下文并遍历DOM以获取相关元素：

$(document).ready(function(){
    $('button').click(function(){
        var $button = $(this);
        var subtract = parseInt($button.siblings('input').val(), 10);
        var $currentP = $button.siblings('.number').children('p');
        var current = parseInt($currentP.text(), 10);
        var newVal = current - subtract; 
        $currentP.effect('explode', function() {
            $currentP.text(newVal);
            $(this).show(); 
        });            
    });
});

Answer 2

http://jsfiddle.net/zunc8/

你必须找到你想要改变的那个：

$(document).ready(function(){
    $('button').click(function(){
        var parent = $(this).parent();
        var subtract = parseInt(parent.find('#subtract').val(), 10);
        var current = parseInt(parent.find('.number p').text(),10);
        var newVal = current - subtract; 
        //$('.number p').effect('explode');
        parent.find('.number p').text(newVal);
    });
});

从当前数字中减去输入

2 个答案: