Javascript Hide / Show - более элегантный способ сделать это? - PullRequest
Новая
       21

Javascript Hide / Show - более элегантный способ сделать это?

0 голосов
/ 08 марта 2011

Я ищу более элегантный способ скрыть / показать элементы div, используя встроенный javascript.

Если навести курсор мыши на логотип оранжевого / желтого круга над автомобилями, должен появиться тег.Когда они отключены, они должны исчезнуть.

URL:

http://174.120.239.48/~peakperf/

<div class="second">
    <div id="speech2" style="display: none">
        <img src="<?php bloginfo('template_url'); ?>/images/speech2.png" width="334" height="50">
        </div>
    <a id="various2" href="#inline2,javascript:HideContent('speech1')" title="" onmouseover="HideContent('speech1'); return true;">
        <img src="<?php bloginfo('template_url'); ?>/images/clicker.png" width="62" height="50" onmouseover="document.getElementById('speech2').style.display = 'block'" onmouseout="document.getElementById('speech2').style.display = 'none'">
    </a>
</div>

Вот пастбина используемого кода:

http://pastebin.com/JsW6eJRZ

Спасибо.

Ответы [ 2 ]

2 голосов
/ 08 марта 2011

Более элегантное решение - использовать JQuery. Как только вы включите библиотеку в файл, показ Div выполняется с помощью следующего селектора 

$('#idOfDiv').show();

Или если нет идентификаторов, а есть классы 

$('.ClassName').show();

Теперь вместо того, чтобы иметь события onclick в html, как у вас сейчас, вы просто связываете их в jquery с помощью метода ready () следующим образом: 

$(document).ready(function()
{
   $('#idOfDiv').bind('click', function()
   {
      //do work here in this anonymous callback function
   });
});

Все это можно сделать во внешнем js-файле, что значительно очистит ваш HTML-код и поместите всю свою логику JavaScript в одном месте.

EDIT: Пример применяется к вашей ситуации 

$(document).ready(function() 
{
   $('#various1').mouseover(function()
   {
      $('#speech1').show();
   });

   $('#various1').mouseout(function()
   {
      $('#speech1').hide();
   });   
});

Если вы стали хитрыми и используете цикл for, вы можете просто добавить число в конец строки, которая представляет селекторы, вот так 

$(document).ready(function() 
{
   for(var i = 1; i < 7; i++)
   {
      $('#various' + i).mouseover(function()
      {
         $('#speech' + i).show();
      });

      $('#various' + i).mouseout(function()
      {
         $('#speech' + i).hide();
      });   
   }
});

Функции mouseout и mouseover - это просто явная версия использования, вот так 

$('selector').bind('mouseover', function()
{
});

$('selector').bind('mouseout', function()
{
});
0 голосов
/ 08 марта 2011

Вы рассматривали возможность использования jQuery для этого? Кроме того, почему код должен быть встроен?

Я бы порекомендовал сделать что-то вроде этого: http://jsfiddle.net/4N9ym/2/

Обратите внимание, что у меня здесь все перевернуто (возможно, вы захотите оживить, а не оживить).

...