Простой пример странной проблемы с переключением jquery - PullRequest
Новая
       14

Простой пример странной проблемы с переключением jquery

0 голосов
/ 12 февраля 2011

Я пытаюсь сделать простой эффект частичного затухания, используя переключатель, чтобы переключать непрозрачность между двумя значениями при нажатии на элемент.Но первый щелчок ничего не делает!

HTML-код: 

<html>
<head>
<script type="text/javascript" src="../jquery-1.4.min.js"></script>
<script type="text/javascript" src="toggle.js"></script>
</head>

<body>
<div class="toggler" style="background:grey;width:300px;height:300px;"></div>

</body>
</html>

И JS-код: 

$(document).ready(function() {
    $('div.toggler').click(function(event) {
        $(this).unbind('click');

        $('div.toggler').toggle(function(event) {
            $('div.toggler').css({
                'opacity': 0.5
            });
            alert('0.5');
            return false;
        }, function() {
            $('div.toggler').css({
                'opacity': 0.1
            });
            alert('0.1');
            return false;
        });
        event.preventDefault();
    });
});

Чтобы уточнить, он работает ", но только после первого клика!Поэтому мне нужно дважды щелкнуть, чтобы начать работать!Я пробовал это в Firefox и Opera.

Редактировать: Ушли с решением Маркуса Са и Стеуба: 

$('div.toggler').toggle(
    function(event){
        $(this).css({ 'opacity':0.5 });
        alert('0.5');
        return false;
    }, 
    function(){
        $(this).css({ 'opacity':0.1 });
        alert('0.1');
        return false;
    }
);

Ответы [ 4 ]

1 голос
/ 12 февраля 2011

Поскольку вы привязываетесь к событию click один раз, затем отменяете привязку и снова привязываетесь к нему через переключательДля чего?Просто используйте переключатель.Здесь работает пример .

1 голос
/ 12 февраля 2011

Попробуйте это, более просто: 

$('div.toggler').toggle(
    function(event){
        $('div.toggler').css({ 'opacity':0.5 });
        alert('0.5');
        return false;
    }, 
    function(){
        $('div.toggler').css({ 'opacity':0.1 });
        alert('0.1');
        return false;
    }
);

см. Рабочий здесь

0 голосов
/ 12 февраля 2011

На самом деле здесь недостаточно информации, проблема МОЖЕТ быть в том, что ваш CSS изначально устанавливает непрозрачность на 0,5, чтобы начать, поэтому, когда вы нажимаете сначала переключатель, он уже на 0,5, и поэтому он переключается с 0,5 на 0,5, и ничего не происходит .

Вместо этого я бы порекомендовал создать 2 тега CSS, затем проверить, какой тег уже есть, и заменить его другим.

т.е. Вы можете создать: 

.fiftyPercent{ opacity:0.5; }
.tenPercent{ opacity:0.1; }

Тогда в вашем html начните с 

<div class="toggler fiftyPercent" style="background:grey;width:300px;height:300px;"></div>

Тогда все, что вам нужно сделать в JS, - это toggleClass для обоих классов при нажатии. 

$('.toggler').click(function(){
   $('.toggler').toggleClass('fiftyPercent'); 
   $('.toggler').toggleClass('tenPercent');
});

Это только мои 2 цента.

0 голосов
/ 12 февраля 2011

Еще проще без использования переключателя: 

$('div.toggler').css('opacity', .5).click( function() {
    $(this).css('opacity', $(this).css('opacity') == .5 ? .1 : .5);
});
...