如何在方法jQuery上使用多个选择器?

时间:2016-03-29 06:22:36

标签: javascript jquery

我已经使用on jQuery方法选择了两个选项和检查项目。

我有两个选择器ID(#idchief,#terler),我将使用$(document).on方法检查项目是否被选中但我不想使用 document.on ()两次。我想检查选择是否是选择和处理此选择。

$(document).on('change','#idchief', function (event) {

    console.log($("#idchief"));
    var id = parseInt($("#idchief").val());

    for(var keys in cheifs) {
        var vals = cheifs[keys];
        if(parseInt(vals.id) === id){
            console.log(vals.id);
        }
    }
});

$(document).on('change','#teller', function (event) {

    var vals = null;
    var sel = $("#teller").val();
    for(var key in tellers) {
        vals = tellers[key];
            console.log(sel)
        if(vals.id == sel){

            $('input[name=amount]').val(vals.balance)
        }
    }
});

我试过这个

$(document).on('change','#teller,#idchief', function (event) {

   if($teller){
       //code here
   }if(#idchief)(
     ///code here
   )
});

3 个答案:

答案 0 :(得分:3)

使用is()

$(document).on('change','#teller, #idchief', function (event) {
    if ($(this).is('#teller')) {
    // OR
    // $(this).attr('id') === 'teller'
    // OR
    // this.id === 'teller'

答案 1 :(得分:0)

@Tushar答案是正确的,但有一点问题。如果点击了#teller的孩子$(this).is('#teller'),则会产生错误的false

要解决此问题,请检查this#teller还是其中一位是#teller

$(document).on('change','#teller, #idchief', function (event) {

    var that = $('this')
    if (that.is('#teller') || that.parents('#teller').size()) {
        // Code here
    }

    if (that.is('#idchief') || that.parents('#idchief').size()) {
        // Code here
    }
}

修改

如果您使用的是jQuery 1.8或更高版本,请使用.length代替size()

if (that.is('#teller') || that.parents('#teller').length) {
    // Code here
}

答案 2 :(得分:0)

我建议你给他们上课并测试一下

请注意this.id,$(this).attr(“id”)和$(this).is(“#is”)都有效:

JSFiddle

$(function(){
  $("#content").on("change",".sel",function() {
    if (this.id==="sel1") { 
      console.log("sel1"); 
    }
    else if ($(this).is("#sel2")) { 
      console.log("sel2"); 
    }  
    else if ($(this).attr("id")==="sel3") { 
      console.log("sel3"); 
    }  
    else console.log("Not what was expected");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <select id="sel1" class="sel">
    <option value="">Please select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <select id="sel2" class="sel" multiple>
    <option value="">Please select</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
  <select id="sel3" class="sel">
    <option value="">Please select</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
  </select>
</div>