Как изменить текст с помощью загрузки jQuery на мобильном телефоне?

avatar
Max
8 апреля 2018 в 11:22
47
1
0

В настоящее время я использую этот код jQuery:

   if( $(window).width() < 768 ) {
    $(document).ready(function() {
      var $mehranzeigen = $('.mehranzeigen');
      if ( $mehranzeigen.text() == 'Hier klicken für mehr Informationen' )    
        $mehranzeigen.text('Mehr Informationen');  
        });
    };

но не работает/изменяет текст на мобильном телефоне.

Что мне нужно сделать?
Мне нужно изменить текст внутри кнопки (на устройствах с шириной менее 768 пикселей) с: Hier klicken für mehr Informationen на Mehr Informationen

этот текст находится в кнопке с классом css: .mehranzeigen

это должно происходить при загрузке, так как я также изменяю текст при клике с помощью этого кода:

  if( $(window).width() < 768 ) {
   $('.mehranzeigen').click(function(){
        var $this = $(this);
        $this.toggleClass('mehranzeigen');
        if($this.hasClass('mehranzeigen')){
            $this.text('Mehr Informationen');           
        } else {
            $this.text('Weniger Informationen');
        }
    })};

  if( $(window).width() > 768 ) {
    $('.mehranzeigen').click(function(){
        var $this = $(this);
        $this.toggleClass('mehranzeigen');
        if($this.hasClass('mehranzeigen')){
            $this.text('Hier klicken für mehr Informationen');          
        } else {
            $this.text('Hier klicken für weniger Informationen');
        }
    })};
Источник
Benjamin Gruenbaum
8 апреля 2018 в 11:25
1

Вы должны сделать это с помощью медиа-запросов CSS, а не JavaScript.

Ответы (1)

avatar
Mohamed-Yousef
8 апреля 2018 в 12:14
1

было бы лучше и проще создать функцию для этого

function ChangeText( screen , element , itext , elsetext){
   var $this = $(element);
   switch(screen){
      case "notdesktop" :
          if($(window).width() < 768){
             if($(element).hasClass("mehranzeigen")){
                $this.text(itext);
             }else{
                $this.text(elsetext);
             }
          }
          break;
      case default :
          if($(window).width() > 768){
             if($this.hasClass("mehranzeigen")){
                $this.text(itext);
             }else{
                $this.text(elsetext);
             }
          }
          break;
   }
}

тогда вы можете использовать эту функцию, скажем, на document load

$(document).ready(function(){
   ChangeText( 'desktop', '.your_reference_class_here', 'Hier klicken für mehr Informationen' , 'Hier klicken für weniger Informationen');
   ChangeText( 'notdesktop', '.your_reference_class_here', 'Mehr Informationen' , 'Weniger Informationen');
});

И о событии клика поместите window width внутри клика, а не снаружи, НО нет смысла использовать класс для переключения того же класса.. в любом случае событие клика должно быть похоже на

$('.your_reference_class_here').on('click' , function(){
    var $this = $(this);
    $this.toggleClass('mehranzeigen');
    ChangeText( 'desktop', $this , 'Hier klicken für mehr Informationen' , 'Hier klicken für weniger Informationen');
    ChangeText( 'notdesktop', $this , 'Mehr Informationen' , 'Weniger Informationen');
});

Примечание: your_reference_class_here должно выглядеть как class="your_reference_class_here mehranzeigen"

Наконец, если вам нужно использовать то же самое при изменении размера окна, вы можете использовать

$(window).on('resize' , function(){
   ChangeText( 'desktop', '.mehranzeigen', 'Hier klicken für mehr Informationen' , 'Hier klicken für weniger Informationen');
   ChangeText( 'notdesktop', '.mehranzeigen', 'Mehr Informationen' , 'Weniger Informationen');
});

Этот код не тестировался, но я полагаю, что вы можете застрять, если у вас есть более одного элемента с классом mehranzeigen, для этого вам может понадобиться использовать .each() при загрузке и изменении размера

$('.your_reference_class_here').each(function(){
    var $this = $(this);
    ChangeText( 'desktop', $this , 'Hier klicken für mehr Informationen' , 'Hier klicken für weniger Informationen');
    ChangeText( 'notdesktop', $this , 'Mehr Informationen' , 'Weniger Informationen');
});