Блог

Главная - Вопросы по программированию - вызов функции JS без какого-либо события в div

вызов функции JS без какого-либо события в div

#javascript #html #css #wordpress

#javascript #HTML #css #wordpress

Вопрос:

У меня есть страница, которая содержит следующий код.

 <style>
.objects {display: inline-table; width: 180px; height: 180px;  border-radius: 50%; transition: transform .4s;}
.objects:hover { transform: scale(1.1); }
.objects:after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width:180px; height: 180px; z-index: -1; background-color: rgba(255, 255, 255, 0.4);}
@media screen and (max-width: 500px) {
.objects, .objects:after { width: 20vw; height: 20vw;}
}
.objects p { text-align: center; vertical-align: middle; display: table-cell; visibility: hidden; color: black; z-index: 100; position: relative;} 
#object1{background-color: brown;} 
#object2{background-color: red;} 
#object3{background-color: yellow;} 
#object4{background-color: blue;}
#object5{background-color: green;}
#object6{background-color: black;}
</style>
<div style="display: flex; justify-content: space-around;margin-top:50px;margin-bottom:100px;">
<div id="object1" class="objects" onmouseover="nomeIn(this)" onmouseout="nomeOut(this)" >
<p>brick brown</p>
</div>
<div id="object2" class="objects" onmouseover="nomeIn(this)" onmouseout="nomeOut(this)" >
<p>brick red</p>
</div>
<div id="object3" class="objects" onmouseover="nomeIn(this)" onmouseout="nomeOut(this)">
<p>brick melange</p>
</div>
</div>


<script>
function nomeIn(object){
  let selettore = "#"   object.id   " p";
  document.querySelector(selettore).style.visibility = "visible";
}
function nomeOut(object){
  let selettore = "#"   object.id   " p";
  document.querySelector(selettore).style.visibility = "hidden";
}
</script>

Эта страница работает правильно, как вы можете видеть в следующем JSFiddle:

Однако по некоторым причинам один из плагинов, которые у меня есть на моем сайте, продолжает удалять все события из html-кода, поэтому я не могу использовать «onmouseover» и «onmouseout».

Без этих событий в html я не могу вызвать функцию, и я должен написать другой JS-код, который был бы похож на этот:

 document.querySelector(".objects").onmouseover = function nomeIn(){
let selector = "#"   this.id   " p";
document.querySelector(selector).style.visibility = "visible";
}
document.querySelector(".objects").onmouseout = function nomeOut(){ 
let selector = "#"   this.id   " p";
document.querySelector(selector).style.visibility = "hidden";
}

Однако в этом случае наведение курсора мыши будет работать только с первым круговым элементом (текст будет отображаться только в первом круге): JSFiddle

Что я делаю не так? Спасибо за вашу помощь.

Комментарии:

1. «будет работать только с первым циклическим элементом» — потому что так .querySelector() работает. Возможно, вы захотите взглянуть на .querySelectorAll()

2. Почему вы используете JS для этого? .objects p { visibility: hidden } .objects:hover p { visibility: visible } (особенно, когда у вас уже есть такое правило для: .objects:hover { transform: scale(1.1); } ): jsfiddle.net/9ru6ceyk

3. Спасибо, Андреас. В конце концов, ваше чистое CSS-решение было лучшим, которое я мог использовать; однако мне очень понравилось объяснение querySelectorAll() … Вероятно, когда я его программировал, я слишком устал: P

Ответ №1:

Потому что во втором коде вы используете document.querySelector для выбора .objects divs. Эта функция всегда возвращает первый встреченный элемент. Чтобы решить эту проблему, вы могли бы использовать document.querySelectorAll функцию и выполнять итерации по каждому элементу:

 [ ...document.querySelectorAll(".objects") ].forEach(element => {
  element.onmouseover = function () {
     let selector = "#"   this.id   " p";
     document.querySelector(selector).style.visibility = "visible";
  }

  element.onmouseout = function () { 
    let selector = "#"   this.id   " p";
    document.querySelector(selector).style.visibility = "hidden";
  }
});
Метки: