javascript - 如何在加载页面时自动启动jquery函数,并保持它的用户交互

  显示原文与译文双语对照的内容
0 0

我在页面上使用Jquery的javascript函数。 我想让它在页面加载时自动启动这个函数,但是用户还可以与函数交互。 这个函数包括选择一个链接来隐藏和fadeIn一个新的div 。 我也想让这一切自动发生。


$(document).ready(function() {


 $('#tablecell1').click((function () {
 var last_image = null;

 return function () {
 if (last_image) {
 $('#tablecell1. selected').attr('src', last_image).removeClass('selected');
 }

 var $clicked_image = $('img', this);
 last_image = $clicked_image.attr('src');
 $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_01.gif').addClass('selected');
 $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
 $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
 $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
 $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

 }
})());

 $('#tablecell2').click((function () {
 var last_image = null;

 return function () {
 if (last_image) {
 $('#tablecell2. selected').attr('src', last_image).removeClass('selected');
 }

 var $clicked_image = $('img', this);
 last_image = $clicked_image.attr('src');
 $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_02.gif').addClass('selected');
 $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
 $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
 $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
 $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

 }
})());

 $('#tablecell2').click((function () {
 var last_image = null;

 return function () {
 if (last_image) {
 $('#tablecell2. selected').attr('src', last_image).removeClass('selected');
 }

 var $clicked_image = $('img', this);
 last_image = $clicked_image.attr('src');
 $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_02.gif').addClass('selected');
 $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
 $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
 $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
 $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

 }
})());

 $('#tablecell3').click((function () {
 var last_image = null;

 return function () {
 if (last_image) {
 $('#tablecell3. selected').attr('src', last_image).removeClass('selected');
 }

 var $clicked_image = $('img', this);
 last_image = $clicked_image.attr('src');
 $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_03.gif').addClass('selected');
 $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
 $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
 $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
 $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

 }
})());

 $('#tablecell4').click((function () {
 var last_image = null;

 return function () {
 if (last_image) {
 $('#tablecell4. selected').attr('src', last_image).removeClass('selected');
 }

 var $clicked_image = $('img', this);
 last_image = $clicked_image.attr('src');
 $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_04.gif').addClass('selected');
 $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
 $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
 $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
 $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

 }
})());

 $('#tablecell5').click((function () {
 var last_image = null;

 return function () {
 if (last_image) {
 $('#tablecell5. selected').attr('src', last_image).removeClass('selected');
 }

 var $clicked_image = $('img', this);
 last_image = $clicked_image.attr('src');
 $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_05.gif').addClass('selected');
 $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
 $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
 $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
 $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');

 }
})());


 $('.preview').hide();

 $('#link_1').click(function(){ 
 $('#latest_story_preview1').hide();
 $('#latest_story_preview2').hide();
 $('#latest_story_preview3').hide();
 $('#latest_story_preview4').hide();
 $('#latest_story_main').fadeIn(800);
 }); 

 $('#link_2').click(function(){ 
 $('#latest_story_main').hide();
 $('#latest_story_preview2').hide();
 $('#latest_story_preview3').hide();
 $('#latest_story_preview4').hide();
 $('#latest_story_preview1').fadeIn(800);
 });

 $('#link_3').click(function(){ 
 $('#latest_story_main').hide();
 $('#latest_story_preview1').hide();
 $('#latest_story_preview3').hide();
 $('#latest_story_preview4').hide();
 $('#latest_story_preview2').fadeIn(800);
 });

 $('#link_4').click(function(){ 
 $('#latest_story_main').hide();
 $('#latest_story_preview1').hide();
 $('#latest_story_preview2').hide();
 $('#latest_story_preview4').hide();
 $('#latest_story_preview3').fadeIn(800);
 });
 $('#link_5').click(function(){ 
 $('#latest_story_main').hide();
 $('#latest_story_preview1').hide();
 $('#latest_story_preview2').hide();
 $('#latest_story_preview3').hide();
 $('#latest_story_preview4').fadeIn(800);
 });


 });

时间: 原作者:

0 0

可以使用 .trigger() 触发代码中的任何事件

作为


 $('#link_1').trigger('click');

原作者:
0 0

给函数一个名称,然后在适当的地方调用它。


function hideLinkFadeDiv(link, div) {
 link.hide();
 div.fadeIn();
};

$(function() {//Personal Preference Instead of $(document).ready(function() {

 hideLinkFadeDiv($('#foo'), $('#bar'));
//Runs when the document loads

 $('#foo').on('click', function() { 
 hideLinkFadeDiv($(this), $('#bar'));
//runs when #foo is clicked
 });
});

原作者:
0 0

我没有改变你提供的函数的内部工作方式,但是你应该考虑使用类而不是 id


//Once the DOM is ready
$(function(){
 tableClick("1", {"2","3","4","5"});
 tableClick("2", {"1","3","4","5"});
 tableClick("3", {"1","2","4","5"});
 tableClick("4", {"1","2","3","5"});
 tableClick("5", {"1","2","3","4"});

 $('.preview').hide();

 linkClick("1", {"1","2","3","4"});
 linkClick("2", {"0","2","3","4"});
 linkClick("3", {"0","1","3","4"});
 linkClick("4", {"0","1","2","4"});
 linkClick("5", {"0","1","2","3"});
});

//tableClick
var tableClick = function(el, order){
 $("#tablecell" + el).click(function(){
 var last_image = null;

 return function () {
 if (last_image) {
 $(this).find(".selected").attr("src", last_image).removeClass("selected");
 }

 var $clicked_image = $("img", this);
 last_image = $clicked_image.attr("src");
 $clicked_image.attr("src","NewsBarAZ/Article-Nav-Bar2_0" + el +".gif").addClass("selected");
 for (var i = 1; i <= order.length; i++ ){
 $("#img" + order[i]).attr("src","NewsBarAZ/Article-Nav-Bar1_0" + order[i] +".gif");
 }
 }
 });
};

//linkClick
var linkClick = function(el, hideElements){
 $("#link_" + el).click(function(){
//hide elements
 for (var i = 0; i <hideElements.length; i++){ 
 if (hideElements[i] =="0") $("#latest_story_main").hide();
 else $("#latest_story_preview" + hideElements[i]).hide();
 }

//show active
 var active = parseInt(el) - 1;

 if (active == 0) active ="main";
 else active ="preview" + active;

 $("#latest_story_" + active).fadeIn(800);
 });
};

...