如何使用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。 我期望的是应该显示从Tea div中单击微调器的时间，而应该从咖啡中显示出单击咖啡的时间。请帮助我

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

Answer 2

尝试这个：

$(function () {
    $('.spinner').each(function () {
        var $el = $(this),            
            $buttons = $el.find('button'),
            $h4 = $el.find('h4'),
            input = $el.find('input').get(0);

        function showAlert() {
            alert($h4.get(0).className);
        }

        $buttons.eq(0).on('click', function (event) {
            event.preventDefault();

            input.value = (parseInt(input.value, 10) || 0) + 1;

            showAlert();
        });

        $buttons.eq(1).on('click', function (event) {
            event.preventDefault();

            input.value = (parseInt(input.value, 10) || 0) - 1;
        });       
    });
});

JSFiddle http://jsfiddle.net/yLtn57aw/2/

希望这可以帮助