JQuery добавление и удаление «активных» классов плюс наведение - PullRequest
Новая
       41

JQuery добавление и удаление «активных» классов плюс наведение

0 голосов
/ 26 декабря 2009

У меня есть список определений с миниатюрами. Они имеют непрозрачность 50% с классом «большого пальца». При зависании 100% непрозрачность. При нажатии 100% непрозрачность плюс «большой палец» на «большой палец» класс

Пока мой дрянной код работает, единственное, что я не могу получить 100% на клике. 

dl {
    width: 700px;
}
dt {
    clear: left;
    float: right;
    width: 400px;
    height:80px;
    margin: 0 0 10px 0;
    background:orange;
}
dd.thumb, dd.thumbActive {
    clear: none;
    float: left;
    margin: 0 0 10px 0;
    background:black;
}
dd {
    clear: right;
}

    jQuery.noConflict();

    jQuery(document).ready(function() {

        /* just for debugging */
        function showClassNames() {
                jQuery("dt").each(function() {
                    var className = jQuery(this).next().attr('class');
                    jQuery(this).text(className);
                });
        };
        showClassNames();

        /* resets all thumbs (50% alpha, .thumb classname) */
        function resetThumbs() {
                jQuery("dd").each(function() {
                jQuery(this).removeClass("thumbActive");
                jQuery(this).addClass("thumb");
                jQuery("dd img").css('opacity', 0.5);
            });
        };

        // half opacity for all thumbs except the first one (active)
        jQuery("dd:not(.thumbActive) img").css('opacity', 0.5);
        jQuery("dd img").hover(
            function() { jQuery(this).css('opacity', 1.0); },
            function() { jQuery(this).css('opacity', 0.5); }
        );

        jQuery("a.thumbClick").click(function() {
            resetThumbs();
            jQuery(this).parent().removeClass("thumb");
            jQuery(this).parent().addClass("thumbActive");
            jQuery(this).css('opacity', 1.0);
            showClassNames();           
            return false;
        });

    }); // end document ready

<div id="album-canvas-left" style="width:930px; " >         
<dl id="thumb-list" >
    <dt></dt>
    <dd class="thumbActive"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd>
    <dd></dd>
    <dt></dt>
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd>
    <dd></dd>
    <dt></dt>
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd>
    <dd></dd>
</dl>

Ответы [ 3 ]

2 голосов
/ 26 декабря 2009

Я бы просто переместил ваши настройки прозрачности в CSS и просто добавил / удалил классы в jQuery. На самом деле, если вы не ориентируетесь на IE6, вы можете просто использовать :hover в CSS для обработки непрозрачности.

С ПОДДЕРЖКОЙ IE6 

dd img{ 
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
}

dd.hover img, dd.thumbActive img { 
    opacity: 1.0;
    -moz-opacity: 1.0;
    filter:alpha(opacity=100);
}

Затем измените hover на это: 

jQuery("dd").hover(
    function() { jQuery(this).addClass('hover'); },
    function() { jQuery(this).removeClass('hover'); }
);

БЕЗ ПОДДЕРЖКИ IE6 

dd img{ 
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
}

dd:hover img, dd.thumbActive img{ 
    opacity: 1.0;
    -moz-opacity: 1.0;
    filter:alpha(opacity=100);
}

И просто полностью удалите ваш hover звонок.

1 голос
/ 26 декабря 2009

Когда вы щелкаете мышью, все еще вызывается функция наведения, которая устанавливает непрозрачность обратно на .5

Вы должны в функции hover out (Второй аргумент функции hover) проверить и убедиться, что класс объекта не установлен в thumbActive.

0 голосов
/ 27 декабря 2009

Благодаря обоим я придумал это: 

dd img {
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
}
/* IE6 does not support :hover */
dd.hover img { 
    opacity: 1.0;
    -moz-opacity: 1.0;
    filter:alpha(opacity=100);
}

jQuery("dd").hover(
    function() { 
        jQuery(this).addClass('hover');
        showClassNames();
    },
    function() { 
        if (!jQuery(this).hasClass('active')) jQuery(this).removeClass('hover'); 
    }
);

jQuery("a.thumbClick").click(function() {
    jQuery("dd").removeClass("hover active");
    jQuery(this).parent().addClass("hover active");     
    return false;
});

<dl id="thumb-list" >
    <dt></dt>
    <dd class="thumb hover active"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd>
    <dd></dd>
    <dt></dt>
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd>
    <dd></dd>
    <dt></dt>
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd>
    <dd></dd>
</dl>
...