Как использовать несколько селекторов с методом jQuery?

Я создал два выбора и проверку с элементами был выбран с помощью метода jQuery on.Как использовать несколько селекторов с методом jQuery?

У меня есть два селектора идентификатора (#idchief, #teller) и я буду использовать $(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 
    ) 
});

источник

2016-03-29 Heng Sopheak

'$ (документ) .он ('изменение', '# кассиром, # idchief', функция (е) {' попробовать этот – guradio

Установить же класс для обоих, а затем проверить его id и продолжить выполнение в соответствии с id – Apb

@guradio - это не совсем то, что он сделал? – mplungjan

@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 
    } 
}

EDIT

Если вы используете JQuery версии 1.8 или выше, используйте .length вместо size()

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

источник

2016-03-29 06:33:50

Я использовал else вместо if, потому что он имеет только если и еще условно, и вы могли бы рассказать мне почему-то, почему нам нужно использовать метод size()? –

[size()] (https: //api.jquery.com/size /) не будет возвращать никакие элементы, выбранные 'parents ('# teller')', если это ноль, который означает, что элемент с щелчком не является дочерним элементом '# teller', а условие оценивается как false, иначе true. –

I Снова вниз. Я только что протестировал и ... также запускает щелчок ребенка! – mplungjan

Использование is()

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

источник

2016-03-29 06:25:32 Tushar

, который лучше, чем между $ (this) .is и $ (this) .attr ('id') == 'teller'? –

@HengSopheak Я думаю, что сравнение строки лучше, чем объект – Tushar

ваш код также работает, но я просто рассматриваю код #Adna umer, потому что он может избежать некоторых неудобных ошибок. –

Я предлагаю вам дать им класс и тест, который вместо того, чтобы

Обратите внимание, что 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>

источник

2016-03-29 08:04:45 mplungjan

Как использовать несколько селекторов с методом jQuery?

ответ

Смежные вопросы