HTML jquery Buttons 有时没有反应答案

【问题标题】：HTML jquery Buttons sometimes not reactingHTML jquery Buttons 有时没有反应
【发布时间】：2012-12-25 22:45:35
【问题描述】：

您好，我有几个简单的按钮，有时没有反应。它很少发生，但我仍然不喜欢它。如果您非常快速地单击或非常快速地更改导航，它会发生更多。这是我为他们准备的代码：

$(document).ready(function () { 
    $('[id*=txt]').hide();
    $('[id*=hd]').hide();                   
    $('[id*=home]').show();
    $('#btnhome').css('background-color',"#555");
    $('#btnhome').css('opacity',"0.4");

    $('.button').click(function (){
        $('[id*=txt]').hide();
        $('[id*=hd]').hide();
        $('.button').css('background',"transparent");
        $('.button').css('opacity',"1");
        $(this).css('background-color',"#555");
        $(this).css('opacity',"0.4");
   });          

    $('#btnhome').click(function () {   
        $('[id*=home]').show();             
    });     

    $('#btnabout').click(function () {              
        $('[id*=about]').show();        
    });    

    $('#btncontact').click(function () {        
        $('[id*=contact]').show();  
    });
});

这些是按钮：

<button class="button" id="btnhome">Home</button>          
<button class="button" id="btnabout">About</button>
<button class="button" id="btncontact">Contact</button>

它们仅用于显示和隐藏文本，并且在单击时还会更改颜色不透明度等。当他们没有反应时，什么都没有发生，就好像我没有定义任何点击函数一样。

【问题讨论】：

仅供参考，您可以通过用逗号分隔选择器来简化一些隐藏/显示内容（即 $('[id*=txt],[id*=hd]') .hide();).

标签： jquery html button click

【解决方案1】：

我想你想要这样的东西

$(document).ready(function () { 
    $('.button').css({'background':'transparent', 'opacity':'1'})
    .eq(0).css({'background-color':'#555', 'opacity':"0.4"});

    $('.button').click(function (){
        $('.button').css({'background':'transparent', 'opacity':'1'});
        $(this).css({'background-color':'#555', 'opacity':'0.4'});
    });          
});

DEMO.

你也可以使用 $('#btnhome').css({'background-color':'#555', 'opacity':"0.4"}); 而不是 .eq(0).css({'background-color':'#555', 'opacity':"0.4"});。

【讨论】：

是的，这更聪明，但是当 20% 的按钮在点击时根本没有反应时，这仍然不能解决问题。我不知道为什么会发生这种情况？可以连接css吗？
在这里试试 DEMO 。这就是我基本上正在使用的，尝试随机击中它们并快速切换。你会看到有时他们没有反应。它很少（有时更频繁），所以一开始不会发生，但肯定会发生。所以多试几次。告诉我你是否注意到它，如果你知道问题出在哪里。
我无法完全按照您所说的 @user1880779 重现问题。每当我单击按钮时，它都会起作用，但我可以在特定情况下重现问题。尝试单击按钮并在按住鼠标按钮的同时移动鼠标以从按钮上失去焦点，然后释放按钮。在这种情况下，点击不起作用。否则它对我来说很好......
@EhsanT 是的，这是一件很难注意到的事情，因为它每 15 次就会发生一次，但它仍然困扰着我。您必须按随机顺序进行。不仅是 button1、button2、button3，还有 1,3,2,1,3,1,2,1,3,2,3,1...等等，而且越快，发生的次数就越多。

【解决方案2】：

我会做这样的事情 (demo)

CSS

.current {
    background-color: #555;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

HTML

<button class="button current" data-content="home">Home</button>          
<button class="button" data-content="about">About</button>
<button class="button" data-content="contact">Contact</button>
<hr>
<div class="content" id="home">Home text</div>
<div class="content" id="about">About text</div>
<div class="content" id="contact">Contact text</div>

Javascript

$(function () { 

    var setCurrent = function(el){
        var $el = $(el),
            txtId = '#' + $el.attr('data-content');
        // show current content only
        $('.content').hide();
        $(txtId).show();

        // update buttons
        $el
            .addClass('current')
            .siblings().removeClass('current');
    };

    $('.button').click(function(){
        setCurrent(this);
    });
    $('.current').trigger('click');

});

【讨论】：