Ok, I have written the following but I am sure it can be done better, my two main worries here are the awful use of the if else statements in the check variables and the usage of setinterval to set the i variable. my problem with the i variable is that the check's run after the i has been set forcing the i to always have a value of 0 due to the css being set as display none. Hope someone can advise:
(function ($) {
// variables
setInterval(function() {
// Do something every 5 seconds
i = jQuery('#widgets-right').find('.addinput > div:visible').length + 2;
}, 1500);
//check if box has value allready and show if it has
var check1 = function () {
var empty1 = $("#widgets-right .div_2 p .title2:input").filter(function () {
return this.value === "";
});
if (empty1.length) {
$('.div_2').hide();
} else {
$('.div_2').show();
}
},
check2 = function () {
var empty2 = $("#widgets-right .div_3 p .title3:input").filter(function () {
return this.value === "";
});
if (empty2.length) {
$('.div_3').hide();
} else {
$('.div_3').show();
}
},
check3 = function () {
var empty3 = $("#widgets-right .div_4 p .title4:input").filter(function () {
return this.value === "";
});
if (empty3.length) {
$('.div_4').hide();
} else {
$('.div_4').show();
}
},
check4 = function () {
var empty4 = $("#widgets-right .div_5 p .title5:input").filter(function () {
return this.value === "";
});
if (empty4.length) {
$('.div_5').hide();
} else {
$('.div_5').show();
}
},
check5 = function () {
var empty5 = $("#widgets-right .div_6 p .title6:input").filter(function () {
return this.value === "";
});
if (empty5.length) {
$('.div_6').hide();
} else {
$('.div_6').show();
}
},
check6 = function () {
var empty6 = $("#widgets-right .div_7 p .title7:input").filter(function () {
return this.value === "";
});
if (empty6.length) {
$('.div_7').hide();
} else {
$('.div_7').show();
}
},
check7 = function () {
var empty7 = $("#widgets-right .div_8 p .title8:input").filter(function () {
return this.value === "";
});
if (empty7.length) {
$('.div_8').hide();
} else {
$('.div_8').show();
}
},
check8 = function () {
var empty8 = $("#widgets-right .div_9 p .title9:input").filter(function () {
return this.value === "";
});
if (empty8.length) {
$('.div_9').hide();
} else {
$('.div_9').show();
}
},
check9 = function () {
var empty9 = $("#widgets-right .div_10 p .title10:input").filter(function () {
return this.value === "";
});
if (empty9.length) {
$('.div_10').hide();
} else {
$('.div_10').show();
}
};
check1();
check2();
check3();
check4();
check5();
check6();
check7();
check8();
check9();
$('body').ajaxSuccess(function () {
check1();
check2();
check3();
check4();
check5();
check6();
check7();
check8();
check9();
});
//load on widget title click
$(document).on("click", '#widgets-right .widget-top', function () {
$(".area").load("/galleries/ #projects > li a");
check1();
check2();
check3();
check4();
check5();
check6();
check7();
check8();
check9();
});
//stop default href from working
$(document).unbind().on("click", '.area a', function () {
event.preventDefault();
return;
});
//show new forms
$(document).on('click', '#widgets-right .addNew', function () {
if (i === 10) {
alert('thats the max!');
} else if (i === 9) {
alert('one more to go be careful now your gonna break me, Now pick one more image!');
$(".div_" + i).show('slow');
i = i + 1;
} else {
alert(i);
$(".div_" + i).show('slow');
i = i + 1;
alert('Now pick another image');
return false;
}
});
//remove old forms
$(document).on('click', '#widgets-right .remNew', function () {
if (i > 1 && jQuery(this).parent('div').next().is(':visible')) {
alert('remove me in order please.');
} else {
i = i - 1;
$('.title' + i).val("");
$('.link' + i).val("");
$('.img' + i).val("");
$('.gallery_one' + i).attr("src", '');
$(this).parent('div').hide('slow');
}
return false;
});
//load into input boxes
$(document).on("click", "#widgets-right .area a", function () {
$(this).toggleClass('selected');
var title = $(this).attr('title'),
link = $(this).attr('href'),
img = $("img", this).attr('src'),
imgexample = $("img", this).attr('src');
if (i <= 2) {
alert('added to project 1. If you want to add more projects just click button labeled "add new project"!');
$(".title").val(title);
$(".link").val(link);
$(".img").val(img);
$(".gallery_one").attr("src", imgexample);
} else {
i = i - 1;
alert('added to project ' + i);
$('.title' + i).val(title);
$('.link' + i).val(link);
$('.img' + i).val(img);
$('.gallery_one' + i).attr("src", imgexample);
i = i + 1;
}
});
}(jQuery));
here's html structure:
<div class="addnew">
<input type="text">
<input type="text">
<div class="addinput">
<a href="#" class="addnew">ADD NEW</a>
<div class="div_2">
<h4>lorem ipsum</h4>
<div class="div"><img src="" alt=""></div>
<p><label for=""></label><input type="text" /></p>
<a class="remNew" href="">REMOVE</a>
</div>
<div class="div_3">
<h4>lorem ipsum</h4>
<div class="div"><img src="" alt=""></div>
<p><label for=""></label><input type="text" /></p>
<a class="remNew" href="">REMOVE</a>
</div>
</div>
