We Keep Coding

is there a better way to write this jquery so it's only 3 functions? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
So I'm not that great at jquery, but is there a way to merge the code for all the same clicks so I only have 3 functions? A more function, a next function, and a close function. I've tried and when I do they end up not working and break.
$(document).ready(function(){
$('a.more').click(function(){
$(this).parent().addClass('active');
});
$('a.more').click(function(){
$(this).parent().siblings().addClass('hide');
});
$('a.more').click(function(){
var load = $(this).parent().attr('id');
$('#'+load+'1').load(''+load+'.html');
});
$('a.close').click(function(){
$(this).parent('.card').removeClass('active');
});
$("a.close").click(function(){
$(this).parent().siblings().removeClass('hide');
});
$('a.close').click(function(){
var load = $(this).parent().attr('id');
$('#'+load+'1').empty();
});
$('a.next').click(function(){
$(this).parent('.card').removeClass('active');
});
$('a.next').click(function(){
var load = $(this).parent().attr('id');
$('#'+load+'1').empty();
});
$('a.next').click(function(){
$(this).parent('.card').addClass('hide');
});
$('a.next').click(function(){
$(this).parent().next('.card').removeClass('hide');
});
$('a.next').click(function(){
$(this).parent().next('.card').addClass('active');
});
$('a.next').click(function(){
var load = $(this).parent().next('.card').attr('id');
$('#'+load+'1').load(''+load+'.html');
});
});

Simple, just combine the contents of the event handlers.
$(document).ready(function(){
$('a.more').click(function(){
$(this).parent().addClass('active');
$(this).parent().siblings().addClass('hide');
var load = $(this).parent().attr('id');
$('#'+load+'1').load(''+load+'.html');
});
$('a.close').click(function(){
$(this).parent('.card').removeClass('active');
$(this).parent().siblings().removeClass('hide');
var load = $(this).parent().attr('id');
$('#'+load+'1').empty();
});
$('a.next').click(function(){
$(this).parent('.card').removeClass('active');
var load = $(this).parent().attr('id');
$('#'+load+'1').empty();
$(this).parent('.card').addClass('hide');
$(this).parent().next('.card').removeClass('hide');
$(this).parent().next('.card').addClass('active');
var load = $(this).parent().next('.card').attr('id');
$('#'+load+'1').load(''+load+'.html');
});
});

This should work ...
$(document).ready(function(){
$('a.more').click(function(){
$(this).parent().addClass('active');
$(this).parent().siblings().addClass('hide');
var load = $(this).parent().attr('id');
$('#'+load+'1').load(''+load+'.html');
});
.. etc same for other functions
Just merge the parts that are for the same event into one function.
Or to be more efficient as le commenteur pointed out ..
$(document).ready(function(){
$('a.more').click(function(){
var elParent=$(this).parent;
elParent.addClass('active');
elParent.siblings().addClass('hide');
var load = elParent.attr('id');
$('#'+load+'1').load(''+load+'.html');
});
.. etc same for other functions

there are pretty much many things that could be optimised. in general you need to use more the dot syntax and avoid remaking jquery objects and use more than one listener for the same selector, because they cost in performance. I will not rewrite your code but I will give a few tips
starting with user2808054 answer for example
$(document).ready(function(){
$('a.more').click(function(){
$(this).parent().addClass('active');
$(this).parent().siblings().addClass('hide');
var load = $(this).parent().attr('id');
$('#'+load+'1').load(''+load+'.html');
});
could be written
$(document).ready(function () {
$('#whatever').click(function () {
var _parent = $(this).parent(),
_id = _parent.attr('id');
_parent.addClass('active').siblings().addClass('hide');
$('#' + _id + '1').load('' + _id + '.html');
});
})
and if you want to stay tight in variables
$(document).ready(function () {
$('#whatever').click(function () {
var _parent = $(this).parent();
_parent.addClass('active').siblings().addClass('hide');
$('#' + _parent.attr('id') + '1').load('' + _parent.attr('id') + '.html');
});
})
also there is no reason in spliting the same listener in many, that costs resourses, instead do one listener, if now you want to split the logic do the logic in separate functions and call them from your listener instead.
I would prefer this format though because it's cleaner and you write for people, not for machines.
$(document).ready(function () {
$('#whatever').click(function () {
var _parent = $(this).parent(),
_id = _parent.attr('id');
_parent
.addClass('active')
.siblings()
.addClass('hide');
$('#' + _id + '1')
.load('' + _id + '.html');
});
});

jquery/javascript how to use $.each on a collection

I need some help with this jQuery code. The code below works fine but i tried to use $.each instead and its not working.
$(document).ready( function(){
$('#pull').click( function(event){
event.stopPropagation();
$('#pf').slideToggle();
});
$('#pullo').click( function(event){
event.stopPropagation();
$('#pt').slideToggle();
});
$('#pullc').click( function(event){
event.stopPropagation();
$('#pc').slideToggle();
});
$(document).click( function(){
$('#pt').hide();
$('#pf').hide();
$('#pc').hide();
});
});
The code below is not working for me, please help
var pul = ["#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"];
$(document).ready( function(){
$.each(pul, function(i, v){
$(i).click( function(event){
event.stopPropagation();
$(v).slideToggle();
});
$(document).click(function(){
$(v).hide();
});
});
});

Make your collection object instead of array:
Here is Demo
var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};
$(document).ready( function(){
$.each(pul, function(i, v){
$(i).click( function(event){
event.stopPropagation();
$(v).slideToggle();
});
$(document).click(function(){
$(v).hide();
});
});

Try this,
var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};
$(document).ready( function(){
$.each(pul, function(i, v){
$(i).click( function(event){
event.stopPropagation();
$(v).slideToggle();
});
$(document).click(function(){
$(v).hide();
});
});
});

You have two ways you can solve this. Either make your array as 2D array:
var pul = [
["#pull", "#pt"],
["#pullo", "#pf"],
["#pullc", "#pc"]];
And you can do $(v[0]).click(... instead of $(i).click(.... And $(v[1]).hide(); instead of $(v).hide();.
Or, you can convert it to an object like others have suggested:
var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};
Right now, you have an invalid object and an invalid array.

live() alternative on() not working jQuery 1.9

I have code do ajax method for loading new content
But I have problem with the new content, the links not applying the action i did like
preventDefault and the ajax method, just after loading the new content
clicking on links make the page reload like there was no ajax code at all
In JQ 1.8 working grate with live() method, but after updating jQuery, not working as it should with on() method
The old code working right and have no problem with it
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
function loadContent(url){
$.ajax({
url: url,
dataType: 'html',
cache: false
}).done(function(html){
var $html = $(html);
$('title').html($html.filter('title').text());
$('#main').replaceWith($html.find('#main'));
$('.nav-menu').replaceWith($html.find('.nav-menu'));
$('.nav-below').replaceWith($html.find('.nav-below'));
});
}
$(function(){
// Get The Content Action
$('.nav-menu li a,#nav-below a,#main a').live('click',function(e) {
href = $(this).attr("href");
loadContent(href);
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
// go top after showing the content
$('html, body').animate({scrollTop:0}, 'slow');
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event){
loadContent(location.pathname);
$('html, body').animate({scrollTop:0}, 'slow');
};
});
</script>
The new updated code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function loadContent(url){
$.ajax({
url: url,
dataType: 'html',
cache: false
}).done(function(html){
var $html = $(html);
$('title').html($html.filter('title').text());
$('#main').replaceWith($html.find('#main'));
$('.nav-menu').replaceWith($html.find('.nav-menu'));
$('.nav-below').replaceWith($html.find('.nav-below'));
});
}
$(function(){
// Get The Content Action, ‡‡=‡=‡=‡=L0000K HERE=‡=‡=‡=‡‡ Not workin JQ 1.9
$('.nav-menu li a,#nav-below a,#main a').on('click',function(e) {
href = $(this).attr("href");
loadContent(href);
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
// go top after showing the content
$('html, body').animate({scrollTop:0}, 'slow');
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event){
loadContent(location.pathname);
$('html, body').animate({scrollTop:0}, 'slow');
};
});
</script>
The problem right here
$('.nav-menu li a,#nav-below a,#main a').on('click',function(e) {
Thank you :)

You don't simply s/live/on, you need to read the documentation of on() to see the changes required to update your code (on is similar to the old delegate()).
If you want to make it work exactly like live(), try...
$(document).on('click', '.nav-menu li a,#nav-below a,#main a', function(e) { });
However, if you can, you're better off choosing the most common persistent ancestor. This means that the events won't have to go all the way up to document to be handled. For example, body probably covers 99.9% of situations. However, it's probably more like #some-container.

for easy usage you can use something like this:
$.fn.follow = function (event, callback) {
$(document).on(event, $(this).selector, callback);
}
and you can use it like:
$("#myselector").follow("click",function(){
/*some callback code*/
});
you can still use event data in your plugin
$("#expform").follow("submit",function(e){
e.preventDefault();
});

Jquery hide/show elements

I'm trying to do this in javascript but more optimized and with toggle function working !
My js code :
$(document).ready(function() {
$('a.details').click(function(e){
var id= '';
$('a.details').each(function() {
id = $(this).attr('href');
$('#'+id).hide();
});
$(this).addClass('active');
id = $(this).attr('href');
$('#'+id).toggle();
e.preventDefault();
});
});

Here is my take on this WITHOUT changing the html except for adding a t to the ID of the rows
http://jsfiddle.net/mplungjan/Rfn8z/
Comments welcome (especially if voting down)
$(document).ready(function() {
$('a.details').each(function() {
var tr = $("#t"+parseInt($(this).html()));
var link = this;
$(this).toggle(
function(e){tr.show(); $(this).addClass('active'); e.preventDefault();},
function(e){tr.hide(); $(this).removeClass('active');e.preventDefault();}
);
});
});

Terrible way of doing things. Instead take a look at this:
http://jsfiddle.net/xzpkq/
Maybe you will be inspired to produce better code

Using jQuery post

I have a link that posts to a url (ajax). Then I want to hide the entire li.
HTML
<li>Product Name Delete</li>
JQUERY
$(function(){
$(".del").click(function () {
var link = $(this).attr('href');
$.post(link, function() {
$(this).parent().slideUp();
return false;
});
event.preventDefault();
});
});

The this-keyword in the success-handler passed to $.post does not refer to the anchor element, so your code won't work. You can easily fix this by saving a reference to the li-element outside the success-handler:
$(function(){
$(".del").click(function () {
var link = $(this).attr('href');
var li = $(this).parent();
$.post(link, function() {
li.slideUp();
return false;
});
event.preventDefault();
});
});