Question

可能是一个很大的初学者问题，但我很难解决它。

我使用按钮创建输入列表以增加或减少它们的值。为了让自己的生活更加轻松，我决定创建一个包含所有逻辑和诸如此类的函数，这样我就不必为每个选项复制大量的代码，而只是将选项名称传递给函数并且快乐，如此：optionMaker('the-name-of-the-ID')。

代码本身完美无缺，但是当我功能化它时，没有任何作用。：（

我想这与在函数中使用variable++或variable--有关，但我不知道如何处理它。发布以下代码。

HTML

<div id="i-am-one-of-the-options" class="option">
    <p>Amount:</p>
    <input type="text" value="0">
    <p class="amount">0</p>
    <p class="amt-btn plus">+</p>
    <p class="amt-btn minus">-</p>
</div>

的jQuery

function optionMaker(optionName) {

    var $theID = $('#' + optionName),
        $input = $theID.find('input'),
        $plus = $theID.find('.plus'),
        $minus = $theID.find('.minus'),
        $ammount = $theID.find('.amount');

    var amt = $input.val();

    $input.attr('name', optionName);

    $plus.click(function() {
        amt++;

        $input.attr('value', amt);
        $ammount.text(amt);
    });

    $plus.click(function() {

        if (amt > 0) {
            amt--;

            $input.attr('value', amt);
            $ammount.text(amt);
        }
    });

}

optionMaker('i-am-one-of-the-options');

感谢关心！

Answer 1

实际上错误很简单：您为第二次单击处理程序编写了$plus而不是$minus。

但要使其完美运行，您应该更喜欢$input.val(value)而不是$input.attr('value', value)，并确保在用户编辑输入时更新金额计数。请参阅下面的完整示例：

function optionMaker(optionName) {

    var $theID = $('#' + optionName),
        $input = $theID.find('input'),
        $plus = $theID.find('.plus'),
        $minus = $theID.find('.minus'),
        $ammount = $theID.find('.amount');
 

    $input.attr('name', optionName);
  
    $input.on('input', function() {
       $ammount.text($(this).val());
    });

    $plus.click(function() {
        var amt = $input.val();
        amt++;

        $input.val(amt);
        $ammount.text(amt);
    });

    $minus.click(function() {
        var amt = $input.val();

        if (amt > 0) {
            amt--;

            $input.val(amt);
            $ammount.text(amt);
        }
    });

}

optionMaker('i-am-one-of-the-options');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="i-am-one-of-the-options" class="option">
    <p>Amount:</p>
    <input type="text" value="0">
    <p class="amount">0</p>
    <p class="amt-btn plus">+</p>
    <p class="amt-btn minus">-</p>
</div>

增加函数中的变量（jQuery）

1 个答案: