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

How to get the value of a particular input field using id in the html templates

本文关键字：输入 字段 获取 id html 何使用      更新时间：2023-09-26

我有两个不同id的div html元素，这里我使用的是spinner。只要微调器输入中的值发生变化，就会显示警告框。

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。请帮我解决

我不确定我是否完全理解您的意图，但在我看来，您似乎想通过向上/向下按钮点击来增加和减少饮料杯的数量。为此，您最好稍微修改标记（删除重复的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

试试这个：

$(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;
        });       
    });
});

JSFiddlehttp://jsfiddle.net/yLtn57aw/2/

希望这能帮助

相关文章：