Функция не работает - (это) меняет свое значение в ней

Question

У меня есть этот простой код, который toggleвсе элементы класса thumbnail кроме одного кликнул. Затем через 2 секунды определенный класс должен быть добавлен или удален к элементу, по которому щелкнули, в зависимости от того, выбран ли он уже.

Проблема с setTimeout (скорее всего), поскольку он не запускает мою функцию, которая проверяет через if else если выбранный элемент должен быть выбран или не выбран, а затем добавляет / удаляет selected-ser учебный класс.

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

Я действительно пытался найти похожие темы, которые уже решены, но я не понимаю, как это не работает (может быть, сама функция неправильна, но я понятия не имею)

Большое спасибо.

Изменить: как кажется, эта тема посвящена той же проблеме. Я не мог найти его раньше, так как не знал, что проблема с "владельцем this". Таким образом, я переименовываю эту тему в" Функция не работает - (это) меняет свою ценность в ней."Таким образом, люди, имеющие дело с той же проблемой, могут более легко искать ее, не зная, почему функция не работает должным образом.,

Спасибо

Answer 1

Если вы используете переменную для ссылки $(this) затем позвоните внутрь setTimeout это будет делать то, что вы хотите. Я добавил немного CSS, чтобы вы могли видеть, что происходит, но приведенный ниже пример будет делать то, что вы хотите:

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

Вы не можете использовать $(this) с точностью до другого события / триггера для доступа к элементу