javascript - 如何在移动设备上使用 jQuery onload 更改文本？

Question

我目前使用这个 jQuery 代码:

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

但它不起作用/会更改移动设备上的文本。

我需要做什么？
我需要将按钮内的文本(在宽度小于 768px 的设备上)从: Hier klicken für mehr Informationen 更改为 Mehr Informationen

此文本位于带有 css 类的按钮中:.mehranzeigen

这应该在加载时发生，因为我还使用以下代码更改了 onclick 文本:

  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');
        }
    })};

Answer 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).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');
});

关于点击事件，将窗口宽度放在点击内部而不是外部，但是使用该类来切换同一个类是没有意义的..无论如何，点击事件应该像

$('.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');
});

Note: your_reference_class_here should be like 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');
});