Как вызвать функцию JavaScript на более чем двух элементах div?

0

Я хотел бы сделать фоновое изменение на нескольких div, но я не знаю, как это сделать.

вот сценарий:

<script>    
function hatterCsere()
{
   var x=document.getElementById("aktualis");
   x.style.backgroundColor="#666";
   x.style.color="#ffffff";
};

function hatterCserevisza(a)
{
   var y=document.getElementById("aktualis");
   y.style.backgroundColor="#CCC";
   y.style.color="#000000";     
};  
</script>

и вот тело:

<div class=aktualis id="aktualis" onMouseover="hatterCserevisza();" onMouseout="hatterCsere()">
   <p>Garabonciás Karácsony</p>
</div>
<div class=aktualis id="tanar">
   <p>Új Tanár Érkezett</p>
</div>

И я хочу использовать функции на div "tanar".

  • 3
    Вы должны использовать jQuery; это делает такие вещи намного проще.
  • 9
    Нет; Вы должны использовать CSS и селектор :hover .
Показать ещё 2 комментария
Теги:

4 ответа

0
Лучший ответ

Используйте параметры функции. Поместите параметр для указания элемента. Тогда вы можете сделать это попеременно. Пример:

function hatterCsere(element)
{
   var x=element;
   x.style.backgroundColor="#666";
   x.style.color="#ffffff";
};

function hatterCserevisza(element)
{
   var y=element;
   y.style.backgroundColor="#CCC";
   y.style.color="#000000";
};

Вы можете назвать это следующим образом:

     <div class=aktualis id="aktualis" onmouseover="hatterCserevisza(this);" onmouseout="hatterCsere(this)">
        <p>Garabonciás Karácsony</p>
    </div>
    <div class=aktualis id="tanar" onmouseover="hatterCserevisza(this);" onmouseout="hatterCsere(this)">
        <p>Új Tanár Érkezett</p>
    </div>
Поделиться
2

Вы не должны делать это в javascript, вы должны сделать это в CSS, например:

.aktualis:hover{
   background-color:red; /*or whatever you want it to be */
}

однако, если вам нужно использовать javascript,

Если каждый div имеет имя класса 'aktualis', вы можете сделать это

var elements=document.getElementsByClassName("aktualis");
for(var i=0;i<elements.length;i++){
    func_to_call(elements[i]);
}
Поделиться
  • 1
    Я голосую исключительно за подход CSS; JavaScript не нужен для этого.
0

Попробуй это:

function hatterCsere(id)
{

var x=document.getElementById(id);
x.style.backgroundColor="#666";
x.style.color="#ffffff";
}

function hatterCserevisza(id)
{

var y=document.getElementById(id);
y.style.backgroundColor="#CCC";
y.style.color="#000000";

}

<div class='aktualis' id="aktualis" onMouseover="hatterCserevisza(this.id);" onMouseout="hatterCsere(this.id)">
            <p>Garabonciás Karácsony</p>
        </div>
        <div class='aktualis' id="tanar" onMouseover="hatterCserevisza(this.id);" onMouseout="hatterCsere(this.id)">
            <p>Új Tanár Érkezett</p>
        </div>
Поделиться
0

Согласитесь со вторым (SLaks) комментарием, который у вас был

<!DOCTYPE html >
 <html>
   <head>
     <title> Bla! </title>
     <style type='text/css'>
        div.bla { color:green;background-color:red; }
        div.bla:hover { color:red;background-color:green; }
     </style>
     <script type='text/javascript'>
     </script>
   </head>
   <body>
        <div class='bla'>div 1</div>
        <div class='bla'>div 2</div>
   </body>
 </html>
Поделиться
  • 0
    спасибо, используйте полный ответ, но это домашнее задание для меня. но теперь я вижу, что моя домашняя работа называется «как использовать javascript unsessery»

Ещё вопросы

Сообщество Overcoder
Наверх
Меню