1

Столкнулся с проблемой

Хочу вызвать событие по нажатию на кнопку

const button = '.button';
const _active = 'button_active';
let reset;

$('.area').on('click', function() {
  // some code here
  $(this).trigger('spinButton');
});

$(button).on('click', () => {
  // some code here
  $(this).trigger('spinButton'); // ~~~~~~~~~~ здесь проблема ~~~~~~~~~~
});

$(button).on('spinButton', function() {
  const that = this;

  if (reset) clearTimeout(reset);
  $(that).addClass(active);
  reset = setTimeout(() => {
    $(that).removeClass(_active);
  }, 900);
});
.area {
  display: block;
  width: 200px;
  height: 200px;
  background: #ddd;
}

.button {
  width: 40px;
  margin: 50px 30px;
  cursor: pointer;
  padding: 20px 50px;
  background: #aaa;
}

.button_active {
  transition: all 0.9s ease 0s;
  transform: rotate(360deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="area"></span>
<div class="button">
  button
</div>

2
  • new CustomEvent
    – meine
    28 апр 2020 в 12:05
  • @meine не совсем понял
    – Imp3l
    28 апр 2020 в 12:07

2 ответа 2

1

const button = '.button';
const _active = 'button_active';
let reset;

$('.area').on('click', function() {
  // some code here
  $(button).trigger('spinButton');
});

$(button).on('click', function() {
  // some code here
  $(this).trigger('spinButton');
});

$(button).on('spinButton', function() {
  const that = this;

  if (reset) clearTimeout(reset);
  $(that).addClass(_active);
  reset = setTimeout(() => {
    $(that).removeClass(_active);
  }, 900);
});
.area {
  display: block;
  width: 200px;
  height: 100px;
  background: #ddd;
}

.button {
  width: 40px;
  margin: 50px 30px;
  cursor: pointer;
  padding: 20px 50px;
  background: #aaa;
}

.button_active {
  transition: all 0.9s ease 0s;
  transform: rotate(360deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="area"></span>
<div class="button">
  button
</div>

5
  • $('.area').on('click', function() { // some code here $(this).trigger('spinButton'); }); вот это место не работает
    – Imp3l
    28 апр 2020 в 12:14
  • @Imp3l Это что?
    – user176262
    28 апр 2020 в 12:14
  • при нажатии на блок .area кнопка тоже должна прокурчиваться
    – Imp3l
    28 апр 2020 в 12:15
  • @Imp3l Уже прокручивается.
    – user176262
    28 апр 2020 в 12:16
  • спасибо, не заметил
    – Imp3l
    28 апр 2020 в 12:17
0

Когда арров функцию пишешь, "this не работает", подробнее тута

В случае jq-events, пишешь либо так:

$('.button').on('click', ({currentTarget})=>{
    $(currentTarget).trigger('spinButton');
});

Либо так (если event нужен):

$('.button').on('click', (e)=>{
    $(e.currentTarget).trigger('spinButton');
});
3
  • $('.area').on('click', function() { // some code here $(this).trigger('spinButton'); }); вот это место не работает
    – Imp3l
    28 апр 2020 в 12:14
  • @Imp3l потому что this = undefined(window)
    – Vadim
    28 апр 2020 в 12:15
  • @Imp3l хз чем тебя мой ответ не устроил, кулстори
    – Vadim
    28 апр 2020 в 12:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.