CODEWITHSUNDEEP
javascriptjquery
Max
Max

Reputation: 53

How to change text using jQuery onload on mobile?

I currently use this jQuery Code:

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

but It doesn't work / changes the text on mobile.

What I need to do?
I need to change a text inside a button (on devices with less than 768px width) from: Hier klicken für mehr Informationen to Mehr Informationen

this text is in a button with the css class: .mehranzeigen

this should happen onload, as I also change the text onclick with this code:

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

Upvotes: 0

Views: 64

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

it'll be better and easier to create a function for this 

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

then you can use this function say on 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');
});

And about click event put the window width inside the click not outside BUT it doesn't make sense to use the class to toggle the same class .. anyway the click event should be like 

$('.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"

Finally if you need to use the same thing on window resize you can use 

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

This code not tested but I believe you may stuck if you have more than one element with class mehranzeigen for this you may need to use .each() on load and on resize

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

Upvotes: 1

Related Questions