javascript - 如何在 html 模板中使用 id 获取特定输入字段的值

Question

我有两个具有不同 id 的 div html 元素，这里我使用的是微调器。每当微调器输入中的值更改时，将显示警报框。

HTML代码

<div id="accordion2" class="panel-group" style="display: block;">  
    <div id="accordion2" class="panel-group">
        <div id="Tea">
            <div class="spinner Tea input-group ">
                <input type="text"  id = "servings" class="form-control input-    sm"  value="Tea"/>
                <div class="input-group-btn-vertical">
                        <button class="btn Tea btn-default">
                            <i class="fa fa-caret-up"></i>
                        </button>
                        <button class="btn Tea btn-default">
                            <i class="fa fa-caret-down"></i>
                        </button>
                </div>
                <h4 id="energy" class="Tea"> Tea </h4>
            </div>

            <div id="Coffee">
                <div class="spinner Coffee input-group ">
                    <input type="text"  id = "servings" class="form-control input-sm"  value="Coffee"/>
                    <div class="input-group-btn-vertical">
                        <button class="btn Coffee btn-default">
                            <i class="fa fa-caret-up"></i>
                        </button>
                        <button class="btn Coffee btn-default">
                            <i class="fa fa-caret-down"></i>
                        </button>
                    </div>
                    <h4 id="energy" class="Coffee">Coffee</h4>
                </div>
            </div>
        </div>

JQuery 代码

$(function(){
    $('.spinner:first-of-type input').on('click', function() {
        $('.spinner:first-of-type input').val(parseInt($('.spinner:first-of-type input').val(), 10) + 1);
        var val = $('.spinner:first-of-type input').val(); 
        changeValues(val);
    });
    $('.spinner:last-of-type input').on('click', function() {  
        $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);  
    });   

    function changeValues(value){
        alert($('#energy').attr('class').split(' '));
    };

});

但每当我单击微调向上箭头时，在警告框中只显示茶。我期望的是当从 Tea div 中点击微调器时应该显示 tea ，当从 coffee 中点击时，应该显示 coffee 。请帮帮我

Answer 1

我不确定我是否完全理解您想要做的事情，但在我看来，您想在单击上/下按钮时增加和减少饮料杯的数量。为此，您最好稍微修改标记(删除重复的 ID，为方便起见添加类)。那时我可能看起来像这样:

$(function() {
    $('.spinner').on('click', '.servings', function(e) {
        $(this).val(parseInt($(this).val() || 0, 10) + 1);
        var val = $(this).val();
        changeValues.call(e.delegateTarget, val);
    })
    .on('click', '.up', function(e) {
        $(e.delegateTarget).find('.servings').val(function() {
            return ++this.value;
        });
    })
    .on('click', '.down', function(e) {
        var $input = $(e.delegateTarget).find('.servings');
        if (+$input.val() > 1) {
            $input.val(function() {
                return --this.value;
            });
        }
    });

    function changeValues(value) {
        var type = $(this).find('.energy').data('type');
        alert(type);
    };
});

演示:http://plnkr.co/edit/9vXC0RipxkzqhXrHJAKD?p=preview