Javascript 在类上查找更改时获取输入的ID

我有几个输入和选项，我想用一个方法来处理。 我的输入表单定义为：

<div class="tab-content">
    <div class="tab-pane fade in active" id="Layout">
        <br>
        <p>Please enter the physical layout</p>
        <form class="form-inline" role="form">
            <div class="form-group">
                <label>Width</label>
                <input class="form-control" id="width" value ="1">
            </div>
            <div class="form-group">
                <label>Height</label>
                <input class="form-control" id="height" value="1">
            </div>
            <div class="form-group">
                <select class="form-control" id="unit">
                    <option>Panels</option>
                    <option>Metres</option>
                </select>

            </div>
            <div class="form-group">
                <label>Rigging</label>
                <select class="form-control" id="rigging">
                    <option>Flown</option>
                    <option>Ground Stack</option>
                    <option>None</option>
                </select>

                </div>
            </form>
        </div>
    <div class="tab-pane fade" id="Power">
        <br>
        <p>Please enter the power supply</p>
        <form class="form-inline" role="form">
            <div class="form-group">
                <select class="form-control" id="amps">
                    <option>13A</option>
                    <option>16A</option>
                    <option>32A</option>
                    <option>63A</option>
                    <option>125A</option>
                </select>

            </div>
            <div class="form-group">
                <select class="form-control" id="phase">
                    <option>Single Phase</option>
                    <option>Three Phase</option>
                </select>

            </div>
        </form>
    </div>
    <div class="tab-pane fade" id="Video">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

利用关键字

---

将事件应用于表单控件类，因为您是输入和选择字段（所以您不只是使用输入选择器）

---

确保SELECT上的ID在本例中是相同的，我将更改此$（'.form group SELECT'）

---

选择选项需要更改为

$(document).ready(function() {
    $('.form-group').find('input').change(function() {
        switch ($(this).attr('id')) {
            case "width":
                console.log('Width chaged');
                break;

            case "height":
                 console.log("Height changed");
                break;

            case "unit":
                 console.log("Unit changed");
                break;

        }
    });
});

---

div

元素不会触发

change

事件。

.form group

是div标记，我想您需要

。form control

我想您的计划是观察

$（'.form control'）

。@MelanciaUK但onchange事件仍然冒泡@a.Wolff这是个好主意。我忘了传播，这太完美了。谢谢

$('.form-group').find('input').change(function () {
    // When the input value get changed the below code will be executed
    console.log(this.id);
    // Based on it add your switch statement
});

 /* get form changes */
    $('.form-control').change(function(){
       switch($(this).attr("id")){
         case "width":
            alert("Width has changed");
         break;

         case "height":
           alert("Height has changd");
         break;

         case "unit":
           alert("Unit has changed");
         break;
       }
      });

$('.form-group select').change(function(){
   switch($(this).attr("id")){
    case "rigging":
       alert("Width has changed");
       break;

   case "power":
        alert("Height has changd");
        break;

    case "phase":
           alert("Unit has changed");
           break;
   }
});

$(document).ready(function() {
    $('.form-group').find('input').change(function() {
        switch ($(this).attr('id')) {
            case "width":
                console.log('Width chaged');
                break;

            case "height":
                 console.log("Height changed");
                break;

            case "unit":
                 console.log("Unit changed");
                break;

        }
    });
});