，关于jQuery中.ready()和.trigger()有关问题
日期：2014-05-16 浏览次数：20316 次
求助，关于jQuery中.ready()和.trigger()问题
是这样的，今天我在看jquery基础教程时，发现了一个奇怪的问题，我写两个了.ready()，在使用.trigger()方法的时候，我把其放在第一个的时候它没效果，然后放在第二个的时候却有效果了，这是为什么呢？
这是jquery代码：
var $body = $('body');
$(document).ready(function(){
var toggleStyleSwitcher = function(event){
if(!$(event.target).is('.button'))
{
$("#switcher .button").toggleClass('hideen');
}
};
$('#switcher').bind("click.collapse",toggleStyleSwitcher);
$('#switcher-narrow,#switcher-large').click(function(){
$('#switcher').unbind('click',toggleStyleSwitcher);
});
$('#switcher-default').click(function(){
$('#switcher').bind('click.collapse',toggleStyleSwitcher);
});
});
$(document).ready(function(){
$('#switcher').trigger('click');
$('#switcher .button').hover(function(){
$(this).addClass('hover').css('background-color','#afa');
},function(){
$(this).removeClass('hover').css('background-color','#fff');
});
$('#switcher').click(function(event){
if($(event.target).is('.button'))
{
$body.removeClass();
if(event.target.id == 'switcher-larage')
{
$body.addClass('large');
}
if(event.target.id == 'switcher-narrow')
{
$body.addClass('narrow');
}
$('#switcher .button').removeClass('selected');
$(event.target).addClass('selected');
}
});
});
这是html代码：
<body>
<div id="switcher">
<h3>Style Switcher</h3>
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
<div id="header">
<h2>A Christmas Carol</h2>
<h2 class="subtitle">In Prose, Being a Ghost Story of Christmas</h2>
<div class="author">by Charles Dickens</div>
</div>
<div class="chapter" id="chapter-preface">
<h3 class="chapter-title">Preface</h3>
<p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me. May it haunt their houses pleasantly, and no one wish to lay it.</p>
<p>Their faithful Friend and Servant,</p>
<p>C. D.</p>
<p>December, 1843.</p>
</div>
<div class="chapter"&nbs
是这样的，今天我在看jquery基础教程时，发现了一个奇怪的问题，我写两个了.ready()，在使用.trigger()方法的时候，我把其放在第一个的时候它没效果，然后放在第二个的时候却有效果了，这是为什么呢？
这是jquery代码：
var $body = $('body');
$(document).ready(function(){
var toggleStyleSwitcher = function(event){
if(!$(event.target).is('.button'))
{
$("#switcher .button").toggleClass('hideen');
}
};
$('#switcher').bind("click.collapse",toggleStyleSwitcher);
$('#switcher-narrow,#switcher-large').click(function(){
$('#switcher').unbind('click',toggleStyleSwitcher);
});
$('#switcher-default').click(function(){
$('#switcher').bind('click.collapse',toggleStyleSwitcher);
});
});
$(document).ready(function(){
$('#switcher').trigger('click');
$('#switcher .button').hover(function(){
$(this).addClass('hover').css('background-color','#afa');
},function(){
$(this).removeClass('hover').css('background-color','#fff');
});
$('#switcher').click(function(event){
if($(event.target).is('.button'))
{
$body.removeClass();
if(event.target.id == 'switcher-larage')
{
$body.addClass('large');
}
if(event.target.id == 'switcher-narrow')
{
$body.addClass('narrow');
}
$('#switcher .button').removeClass('selected');
$(event.target).addClass('selected');
}
});
});
这是html代码：
<body>
<div id="switcher">
<h3>Style Switcher</h3>
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
<div id="header">
<h2>A Christmas Carol</h2>
<h2 class="subtitle">In Prose, Being a Ghost Story of Christmas</h2>
<div class="author">by Charles Dickens</div>
</div>
<div class="chapter" id="chapter-preface">
<h3 class="chapter-title">Preface</h3>
<p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me. May it haunt their houses pleasantly, and no one wish to lay it.</p>
<p>Their faithful Friend and Servant,</p>
<p>C. D.</p>
<p>December, 1843.</p>
</div>
<div class="chapter"&nbs
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
