Question

我正在尝试使用切换来执行简单的部分淡化效果，以便在单击元素时切换两个值之间的不透明度。但是第一次点击什么也没做！

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中试过这个。

编辑：MarcusSá和steweb的解决方案：

$('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; } );

Answer 1

试试这个，更简单：

$('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;
    }
);

见工作here

Answer 2

因为您绑定了click事件一次，然后取消绑定，并通过切换再次绑定到它。做什么的？只需使用切换。这是工作example。

Answer 3

更轻松，无需使用切换：

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

Answer 4

实际上这里没有足够的信息，问题可能是你的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美分。

jquery切换的奇怪问题的简单示例

4 个答案: