Funktion funktioniert nicht - (dies) ändert seinen Wert darin

Question

Ich habe diesen einfachen Code, toggle s alle Elemente einer Klasse thumbnail mit Ausnahme der einen geklickt. Dann sollte nach 2 Sekunden eine bestimmte Klasse zum angeklickten Element hinzugefügt oder entfernt werden, abhängig davon, ob es bereits ausgewählt ist.

Das Problem ist mit setTimeout (höchstwahrscheinlich), da es nicht meine Funktion ausführen, die über if else prüft, ob geklickt Element ausgewählt werden sollte oder nicht ausgewählt, und fügt dann/selected-ser Klasse entfernen.

$(document).ready(function(){ 
    $(".thumbnail").click(function(){ 
     $('.thumbnail').not(this).toggle(2000); 

     setTimeout(function() {    
      if ($(this).hasClass('selected-ser')) { 
       $(this).removeClass('selected-ser'); 
      } else { 
       $(this).addClass('selected-ser'); 
      } 
     }, 2000); 
    }); 
}); 

Ich versuchte wirklich für ähnliche Themen bereits gelöst zu suchen, aber ich verstehe nicht so, wie es nicht funktioniert (es die Funktion selbst sein kann, was falsch ist, aber ich habe keine Ahnung)

Vielen Dank.

Edit: wie es scheint this Thema adressiert das gleiche Problem. Ich konnte vorher nicht danach suchen, da ich nicht wusste, dass das Problem mit "Besitzer von this" war. Daher benenne ich dieses Thema zu "Funktion funktioniert nicht - (dies) ändert seinen Wert darin." So können Leute, die sich mit dem gleichen Problem befassen, leichter nach ihr suchen, ohne zu wissen, warum die Funktion nicht richtig funktioniert.

Danke

Answer 1

Wenn Sie eine Variable verwenden $(this) verweisen können es dann in rufen Innerhalb von setTimeout wird es tun, was Sie wollen. Ich habe einige CSS, so können Sie sehen, was passiert, aber das Beispiel wird unten das tun, was Sie wollen:

$(document).ready(function() { 
 
    var $this = $(this); 
 
    $(".thumbnail").click(function() { 
 
    var $this = $(this); 
 

 
    function changeClass() { 
 
     $this.toggleClass('selected-ser'); 
 
    } 
 
    $('.thumbnail').not(this).toggle(2000); 
 

 
    setTimeout(function() { 
 
     changeClass(); 
 
    }, 2000); 
 
    }); 
 
});

.thumbnail { 
 
    border: solid; 
 
} 
 
.selected-ser { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="thumbnail"> 
 
    <p> 
 
    Content 
 
    </p> 
 
</div> 
 
<div class="thumbnail"> 
 
    <p> 
 
    Content 
 
    </p> 
 
</div> 
 
<div class="thumbnail"> 
 
    <p> 
 
    Content 
 
    </p> 
 
</div> 
 
<div class="thumbnail"> 
 
    <p> 
 
    Content 
 
    </p> 
 
</div>

Answer 2

$(document).ready(function(){ 
    $(".thumbnail").click(function(){ 
     $_this = $(this); 
     $('.thumbnail').not(this).toggle(2000); 

     setTimeout(function() {    
      if ($_this.hasClass('selected-ser')) { 
       $_this.removeClass('selected-ser'); 
      } else { 
       $_this.addClass('selected-ser'); 
      } 
     }, 2000); 
    }); 
}); 

Sie nicht $(this) innerhalb von einem anderen Ereignis/Triggerelement zuzugreifen