Как установить Условие в событии JavaScript, когда оно будет включено или включено, и т.д. - PullRequest
Новая
       31

Как установить Условие в событии JavaScript, когда оно будет включено или включено, и т.д.

1 голос
/ 23 января 2020

Я пытаюсь создать условие JavaScript, но оно не работает. Как правило, я хочу установить условие, если тег HTML наведите курсор мыши, щелкните внутри, если условие

if(tag.onmouseover) вот так,

Я пытаюсь создать слайдер, который я обслуживаю в своем фрагменте. и хотите установить условие, если при наведении курсора выполняется условие.

Смотрите мой фрагмент ниже: 

let $ = ($)=> document.querySelector($);
let _ = (_)=> document.querySelectorAll(_);
let slide = _(".slide");
let demo = $('#demo');



slide.forEach((s)=> {
 if(s.onmouseover){
   demo.innerHTML = 'true';
 } else {
   demo.innerHTML = 'false';
 }
})


// the onmouseover not working in if contidion,
.slide_wrapper{
    display: flex;
    justify-content: space-between;

}
.slide{
    height: 80vh;
    background: cyan;
    color: brown;
    transition: 1s;
    margin: 5px;
    flex: 1;
    text-align: center;
}
.slide:hover{
    flex-grow: 5;
}
<div class="slide_wrapper">
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>

    </div>
    
    
    
    <div id="demo" > </div>

1 Ответ

0 голосов
/ 23 января 2020

Я думаю, что вы хотите использовать .addEventListener(), чтобы заставить его работать так, как вы ожидаете. Вот как это должно быть сделано: 

let $ = ($)=> document.querySelector($);
let _ = (_)=> document.querySelectorAll(_);
let slide = _(".slide");
let demo = $('#demo');



slide.forEach((s)=> {
  s.addEventListener('mouseover', function() {
    demo.innerHTML = 'true';
  });
  s.addEventListener('mouseleave', function() {
    demo.innerHTML = 'false';
  });
})


// the onmouseover not working in if contidion,
.slide_wrapper{
    display: flex;
    justify-content: space-between;

}
.slide{
    height: 80vh;
    background: cyan;
    color: brown;
    transition: 1s;
    margin: 5px;
    flex: 1;
    text-align: center;
}
.slide:hover{
    flex-grow: 5;
}
<div class="slide_wrapper">
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>

    </div>
    
    
    
    <div id="demo" > </div>

Нет необходимости if, поскольку события не работают. Каждый раз, когда вы наводите указатель мыши на .slide, на этом элементе запускается событие mouseover. И если это так, вы хотите изменить innerHTML на 'true'. Если вы оставите указатель мыши на элементе, событие mouseleave будет запущено, и вы захотите изменить текст на false. Так работает коммуникация на основе событий.

...