Javascript Hover Content Show - PullRequest
Новая
       20

Javascript Hover Content Show

0 голосов
/ 29 октября 2010

Я пытаюсь написать функцию JS (используя прототип в рельсах), которая будет показывать скрытые div в li при наведении мыши. Каждый ли имеет уникальный идентификатор, который представляет собой число, например: 

<li id="100">
  <div style="display:none;" id="hover-display-content">Content</div>
  <div style="display:none;" id="more-hover-display-content">Content</div>
  <div style="display:none;" id="even-more-hover-display-content">Content</div>
</li>

Я не уверен, как это сделать, особенно когда JS показывает только скрытый элемент для этого конкретного кода li.

Я думаю что-то вроде: 

Event.observe(window, 'load', function() {  
  Event.observe($("li"), 'mouseover', function() {
     var id = readAttribute("id")
     id.getElementById("hover-display-content").style.display = "inline"; 
     id.getElementById("more-hover-display-content").style.display = "inline";
     id.getElementById("even-hover-display-content").style.display = "inline";
  });  
Event.observe($("li"), 'mouseout', function() {  
     var id = readAttribute("id")
     id.getElementById("hover-display-content").style.display = "none"; 
     id.getElementById("more-hover-display-content").style.display = "none";
     id.getElementById("even-hover-display-content").style.display = "none";
});  
});

Но, похоже, это не работает. Куда я иду не так?

Edit:

Я сейчас использую: 

    Event.observe(window, 'load', function() {  
$$('li').invoke('observe', 'mouseover', function(event) {
    this.children[0].toggle();
});

$$('li').invoke('observe', 'mouseout', function(event) {
    document.children[0].toggle();
});
    });

Что частично работает, однако мой код выглядит следующим образом: 

<ul>
  <li>
    <div style="display:hidden;">Hidden Div</div>
    <div>More content that isn't hidden</div>
  </li>
</ul>

Когда я переворачиваю li, он отображает скрытый div, однако, если я переворачиваю второй div, он снова скрывает комментарий, даже если этот div находится в li. Почему?

Ответы [ 4 ]

1 голос
/ 29 октября 2010

с тегом и парением? просто предоставив идею 

<html>
<head>
<style>
a div{display:none; height:10px;}
a:hover div{display:inline;}
</style>
</head>
<body>
<ul>
  <li><a>a<div id="hover-display-content">Content</div></a></li>
  <li><a>s<div id="more-hover-display-content">Content1</div></a></li>
  <li><a>d<div id="even-more-hover-display-content">Content2</div></a></li>
</ul>  
</body>
</html>
0 голосов
/ 29 октября 2010

с использованием jquery 

$('#id').each(function(){
$(this).css({diplay:'inline'});});

не так просто.,

0 голосов
/ 29 октября 2010

Я бы начал с .getElementByClass () --- устарел в Proto 1.6

Ссылка здесь.

В качестве запасного плана, вот подтверждение-концепция в обычном JS, которая работает: 

<li onmouseover="this.children[0].style.display = 'inline';
                 this.children[1].style.display = 'inline';"> 
   <div id="testdiv" style="display:none;background:blue">test</div>
   <div id="testdiv" style="display:none;background:blue">test</div>
</li>
0 голосов
/ 29 октября 2010

Я не уверен, что это ваша единственная проблема, но одна ключевая вещь заключается в том, что идентификаторы DOM не могут начинаться с цифры, вам нужно добавить префикс к этому как model_name-100. Кроме того, все id должны быть уникальными. Таким образом, ваше внутреннее содержимое div должно иметь эти id, преобразованные в классы, такие как class="even-more-hover-display-content" ... или, в качестве альтернативы, вы можете jsut добавить префикс id к id родительского элемента, например model_name-100-even-more-hover-display-content.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...