2

Есть несколько прослушек на JS, как сделать аналогичное на JQuery? Объясните, кто хорошо понимает: почему переменные inp и nameFscrn не равны? И как заменить addEventListener на аналогичное с JQuery?

var inp = document.getElementById('name-f-scrn');
var nameFscrn = $('#name-f-scrn');

inp.addEventListener('invalid', function(event){
  event.preventDefault();
  if (!event.target.validity.valid){
    $('.notify').addClass('error').text('Введите имя в одном из следующих форматов: Имя, Фамилия Имя, Фамилия Имя Отчество');
    nameFscrn.addClass('invalid');
  }
});

inp.addEventListener('input', function(event){
  if ($('.notify').css('display') == 'block'){
    nameFscrn.removeClass('invalid');
    $('.notify').removeClass('error');
  }
});

А также вот в следующем коде, как заменить строчку document.getElementById('bcaa-f-scrn').checked на аналогичную на JQuery?

$('#bcaa-f-scrn').change(function(){
  if(document.getElementById('bcaa-f-scrn').checked){
    bcaaVal = $('#bcaa-quantity').val() * 1;
    bcaaWeight = $('#bcaa-quantity option:selected').data('weight') * 1;
  }else{
    bcaaVal = 0;
    bcaaWeight = 0;
  }
});

Буду очень благодарен!

1
  • 1
    document.getElementById('name-f-scrn') === $('#name-f-scrn')[0]
    – vp_arth
    6 фев 2017 в 10:03

2 ответа 2

2

Эти функции можно заменить с помощью on.

var inp = document.getElementById('name-f-scrn');
var nameFscrn = $('#name-f-scrn');

nameFscrn.on('invalid', function(event) {
  event.preventDefault();
  if (!event.target.validity.valid) {
    $('.notify').addClass('error').text('Введите имя в одном из следующих форматов: Имя, Фамилия Имя, Фамилия Имя Отчество');
    nameFscrn.addClass('invalid');
  }
});

nameFscrn.on('input', function() {
  if($('.notify').css('display') == 'block') {
    nameFscrn.removeClass('invalid');
    $('.notify').removeClass('error');
  };
});

Выводит оно не одно и тоже потому, что document.getElementById выводит определённый элемент, а $('#...') выводит лист элементов с таким ID. Что бы к этой записи можно было применять функции JS, нужно указать индекс элемента: $('#...')[индекс] или $('#...').get(индекс). Для ID, индекс всегда 0

Все значения типа checked прописываются и проверяются через функцию prop:

$('#bcaa-f-scrn').change(function() {
  if ( $('#bcaa-f-scrn').prop('checked') ) {
    bcaaVal = $('#bcaa-quantity').val() * 1;
    bcaaWeight = $('#bcaa-quantity option:selected').data('weight') * 1;
  } else {
    bcaaVal = 0;
    bcaaWeight = 0;
  }
});
14
  • "$('#...') выводит лист элементов с таким ID" - а я б поспорил)))
    – Qwertiy
    6 фев 2017 в 10:09
  • @Qwertiy, что не так?)) В консоле записал и оно вывело мне список, как при querySelectorAll
    – Yuri
    6 фев 2017 в 10:11
  • Ну с одной стороны так, а с другой - там один элемент. Если id уникален, то всё хорошо, а если нет, то упс))) jsfiddle.net/99m1js0z/1 - В хроме 1 4 4, а какой-то IE говорил 1 1 4. Но первое везде 1.
    – Qwertiy
    6 фев 2017 в 10:19
  • @Qwertiy, тут да, но вот в ситуации с чистыми JS функциями ID обязателен jsfiddle.net/99m1js0z/2
    – Yuri
    6 фев 2017 в 10:25
  • Во-первых, про выдирание элемента я и не спорил. Я процитировал конкретную фразу. Во-вторых, я вообще-то не согласен: раз уж мы подключили jQuery, то надо им и пользоваться, а не ковырять dom-элементы, чтобы у них вызывать нативные методы. По крайней мере для того, что покрывается самим jQuery.
    – Qwertiy
    6 фев 2017 в 10:28
2
document.getElementById('bcaa-f-scrn').checked
$('#bcaa-f-scrn').prop('checked')
7
  • 1
    Пожалуйста, пишите более развёрнутые ответы :) Ваш ответ попал в очередь проверок некачественных ответов
    – Yuri
    6 фев 2017 в 10:09
  • @Yuri, краткость - сестра таланта :) Что именно непонятно в этом ответе?
    – Qwertiy
    6 фев 2017 в 10:20
  • Лично мне, всё понятно. А вот если зайдёт первоклассник и он ничего не поймёт, что это за код в жёлтой штучке, а под ним что за фигня? :D
    – Yuri
    6 фев 2017 в 10:22
  • исходя из вопроса, ответ понятен! Я очень благодарен за ответ 6 фев 2017 в 10:46
  • @reFactorPro, если вопрос решён, выбери один из ответов и прими его нажатием на галочку слева от него.
    – Qwertiy
    6 фев 2017 в 11:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.