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。我期待的是，当从茶叶中点击旋转器时，应该显示茶叶，当从咖啡时，应该显示咖啡。请帮助我

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/

希望这有帮助

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

2 个答案:

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