How or, what is a good approach for this function i'm trying to create?

my_script.js

$(document).ready(function() { $("#home").click(function() { $('.banner').animate({top:'370px', height:'250px', }, 1000) return false }) $("#about").click(function() { $('.banner').animate({top:'20px', height:'145px', }, 1000) return false }) $("#games").click(function() { $('.banner').animate({top:'20px', height:'145px', }, 1000) return false }) $("#district").click(function() { $('.banner').animate({top:'20px', height:'145px', }, 1000) return false }) $("#contact").click(function() { $('.banner').animate({top:'20px', height:'145px', }, 1000) return false }) }) If an id in ["about","contact","district", "games", "membership"] - are clicked, i want to animate some stuff. But if id = "home", i want to animate (or don't animate if alreade on that page) it back.

Obviously, this code i posted doesen't work. But what kind of approach would you guys suggest? Should i put the id's for the banner to animate to the top of my page in an array and loop through it? (How does that look like) Or should i create many diffrent functions, one per id, like now?

/W

Problem courtesy of: XT_Nova

Solution

Assign a common class instead of using ids except home, as you have same code for all items other then home.

$("#home").click(function() { $('.banner').animate({top:'370px', height:'250px', }, 1000) return false; }); $(".commonclassexcepthome").click(function() { $('.banner').animate({top:'370px', height:'250px', }, 1000) return false; });

Solution courtesy of: Adil

Discussion

You can try like this

$("#home").click(function() { $('.banner').animate({top:'370px', height:'250px', }, 1000) return false; }); $("#about,#contact,#games,#district").click(function() { $('.banner').animate({top:'20px', height:'145px', }, 1000) return false; });

Discussion courtesy of: Gautam3164

just make a function with parameters so when you click you call the function and give the parameters for the position and you simplify it

Discussion courtesy of: Diani

What you're seeing here is a better way to write the code above. You said that you do not want to animate .banner if you are already on that page ( or is this available only for home page? ) so the function will return false if the clicked item has class="active"

Note : i did not test the code because i don't have the rest of code.

Discussion courtesy of: stefanz

This recipe can be found in it's original form on Stack Over Flow .

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: function,animate,click,false,top,banner,return,height,courtesy
分页:12
转载请注明
本文标题:How do you create a jQuery function with multiple .click() functions within it?
本站链接:https://www.codesec.net/view/586908.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(14)