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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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