Я не могу привязать функцию jquery к текущему div - PullRequest
Новая
       20

Я не могу привязать функцию jquery к текущему div

0 голосов
/ 07 ноября 2011

У меня есть несколько div с одним и тем же идентификатором (#viewport_outer), при наведении я пытаюсь показать иконку, которая находится в другом div (# icon-hover) ::: Я могу получить иконку для показа (непрозрачность 1) :::

Проблема в том, что я не могу связать функцию для каждого (#viewport_outer) div ::: если я наведу курсор мыши на любой div (#viewport_outer), то значок (# icon-hover) отображается в первом (верхнем) только div :::

Вот мой HTML: 

<div id="viewport_outer" class="default">
    <div id="viewport">
        <div id="icon-hover"></div>
            <p> Some content ...</p>
    </div>
</div>

Вот мой jQuery, я пытался изменить его, но просто не могу заставить его работать ::: Любая помощь будет оценена ::: 

jQuery('#viewport_outer.default').hover(function() {
        jQuery('#icon-hover').css({opacity:1});},
    function() {
        jQuery('#icon-hover').css({opacity:0});
})

Ответы [ 2 ]

2 голосов
/ 07 ноября 2011

Идентификаторы должны использоваться только один раз в любом данном документе HTML.

Вместо этого используйте имя класса, поскольку их можно применять к нескольким элементам на одной странице. 

<div class="viewport_outer default">
1 голос
/ 07 ноября 2011

идентификаторы должны быть уникальными. Вместо этого используйте атрибут class. 

<div id="viewport_outer" class="outerElement default">
    <div class="viewport">
        <div class="icon-hover"></div>
            <p> Some content ...</p>
    </div>
</div>

Javascript: 

jQuery('.outerElement').hover(function() {
        jQuery(this).find('.icon-hover').css({opacity:1});},
    function() {
        jQuery(this).find('.icon-hover').css({opacity:0});
})
...