Блог

Главная - Вопросы по программированию - Функция изменения не работает на планшете, но да в мобильном устройстве

Функция изменения не работает на планшете, но да в мобильном устройстве

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть div с классом ‘send’, который появляется, когда #MyRange меняет свое значение на мобильном устройстве и планшете. На рабочем столе я использую «по щелчку».

На мобильных устройствах и настольных компьютерах она работает хорошо, но я не понимаю, почему не работает на планшете. Это не добавляет класс, видимый для #MyRange.

 var mediaQueries = {
  tablet: window.matchMedia('(min-width: 1024px)'),
  xl: window.matchMedia('(min-width: 1200px)'),
}

if(!mediaQueries.tablet.matches){
  console.log('mobile or tablet');
  $('#myRange').change(function(){ 
    $('.send').addClass('visible');
  });
} else {
  $('#myRange').on('click', function(){ 
    $('.send').addClass('visible');
    $('.myRange').addClass('mouse-visible');
  });
  console.log('desktop');
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Комментарии:

1. Я думаю, что у вас есть опечатка в $('.myRange').addClass('mouse-visible'); , где вы ссылаетесь на элемент с классом MyRange вместо идентификатора . Вы также можете использовать $(this) , если ссылаетесь на элемент, на который нажимается

2. myRange Это и класс, и идентификатор?

3. @xKobaltYes Это так. Есть ли какие-либо проблемы?

4. @Koen Но класс MyRange также существует

5. @Vander Нет, проблем нет. Было бы полезно, если бы вы могли создать изолированную среду. поскольку проблема может быть и с вашим CSS или HTML.