如何在OR条件下使用多个类选择器

时间:2014-06-06 10:07:36

标签: javascript jquery

我有4个名为AgefromAgetocoveragepremium的班级。这些类适用于文本框。每当任何文本框的文字发生变化时,我都想做点什么。我写了这个jQuery,但它不起作用:

<table>
    <tr>
        <td><input class="Agefrom" type="text"/></td>
        <td><input class="Ageto" type="text"/></td>
        <td><input class="coverage" type="text"/></td>
        <td><input class="premium" type="text"/></td>
    </tr>
</table>

我的jQuery

$(document).ready(function(){
    $('[class^=Age],.coverage,.premium').live('change', function () {
        alert('do something');
    });
});

My Fiddle

6 个答案:

答案 0 :(得分:1)

您应该使用on,因为live已弃用且选择器区分大小写:

$(document).ready(function(){
    $('[class^=Age],.coverage,.premium').on('change', function () {
        alert('do something');
    });
});

FIDDLE UPDATED

答案 1 :(得分:0)

首先,您正在使用从jQuery 2.0+中删除的live。请改用on。其次,类选择器区分大小写。试试这个:

$('[class^=Age], .coverage, .premium').on('change', function () {
    alert('do something');
});

Updated fiddle

另请注意,在元素失去焦点之前,文本字段上的change事件不会触发。如果您需要在值发生更改时立即触发事件,请使用keyup

更好的解决方案是在所有必需元素上使用公共类,并仅选择它。

答案 2 :(得分:0)

除了现有的类之外,还在输入上放置一些其他公共类(例如watchChange),并匹配,即:

<td><input class="watchChange Agefrom" type="text"/></td>
<td><input class="watchChange Ageto" type="text"/></td>
<td><input class="watchChange coverage" type="text"/></td>
<td><input class="watchChange premium" type="text"/></td>

$('.watchChange').on('change', document) ...

答案 3 :(得分:0)

您可以使用,分隔符。

live已被弃用。您可以使用on代替此。但是你的元素不是动态的。所以你可以像这样使用

$('.Agefrom,.Coverage,.Premium').change(function () {
        alert('do something');
    });

如果您的元素是动态生成的,请使用on dellegate进行绑定事件,

$(document).on("change",'.Agefrom,.Coverage,.Premium',function () {
            alert('do something');
        });

答案 4 :(得分:0)

试试这个并帮助你...

$(document).ready(function(){
    $('[class^=Age],.coverage,.premium').on('change', function () {
        alert('do something');
    });
});

小提琴链接.. http://jsfiddle.net/BL3Ft/

答案 5 :(得分:0)

可能最好在行中添加一个类并查找内部的所有输入?

之类的东西
<table>
    <tr class="rowclass">
        <td><input class="Agefrom" type="text"/></td>
        <td><input class="Ageto" type="text"/></td>
        <td><input class="coverage" type="text"/></td>
        <td><input class="premium" type="text"/></td>
    </tr>
</table>

和jQuery

$(document).ready(function(){
    $('.rowclass input').on('change', function () {
        alert('do something');
    });
});