We Keep Coding

Jquery with 2 clicks functions

I want to select or deselect a div with a click.
I want this :
click 1 = add color and select div
click 2 = if is the same id go pink, if different go white.
My problem is when I click on the first div (go red), then the second div (first go white and second too), then the third div, the third div go pink, or I want re run the script (for make the third div red like the first div).
My code:
$(document).ready(function () {
$i = 1;
$firstcase = "";
$(".blackcase").click(function firstclick(event) {
if ($i == 1)
{
$("#" + event.target.id).css("background-color", "red");
$firstvalue = $("\#" + event.target.id).html();
$firstcase = "\#" + event.target.id + "";
$i++;
}
else
{
return false;
}
$(".blackcase").one("click", function (event) {
$firstcase2 = "\#" + event.target.id + "";
if ($("#" + event.target.id).is($firstcase))
{
$("#" + event.target.id).css("background-color", "pink");
$i = 0;
$firstcase = "";
return;
}
else
{
$(".blackcase").css("background-color", "white");
$i = 1;
$firstcase = "";
return false;
}
});
return false;
});
});
JSFIDDLE: https://jsfiddle.net/12gwq95u/3/

You can massively simplify your logic if you have a single event handler and store the last clicked id in a variable outside of the click handler. Try this:
var lastClicked = '';
$(".blackcase").click(function(e) {
e.preventDefault();
$('.blackcase').removeClass('red pink');
$(this).addClass(lastClicked != this.id ? 'red' : 'pink');
lastClicked = this.id;
});
Example fiddle

Add Class to div when click counter reaches 0

Right now when you click inside the div, the counter decreases by 1. How do I make it stop at 0?
Also when it reaches 0 how can I add a class?
I want the overlay to be enabled once the click counter reaches 0.
If there is a better way to disable the div box1 after the clicks reach 0. We can try it that way.
$( function() {
$('.box').click( function() {
var num = $(this).find('.num');
num.text( parseInt(num.text()) - 1 );
});
});
fiddle

Rather than searching DOM and parsing HTML on each click, I'd cache both element and its value:
var $box = $('#box1'),
$num = $box.find('.num'),
limit = $num.text();
$box.click(function() {
$num.text(--limit);
if (limit === 0) {
$('.overlay').show();
}
});
Demo.

This should do it:
$('.box').click( function() {
var num = $(this).find('.num');
val = parseInt(num.text()) - 1;
if (val > 0){
num.text(val - 1);
} else {
$(".overlay").show();
// add your class here.
}
num.text( val );
});
Updated Fiddle

Change background color with checkbox, limited number of checkboxes selectable

Desired: User can only click on 2 out of 3 displayed checkboxes; when the user clicks on a checkbox, the checkbox background turns orange.
Currently: The first checkbox selected acts as desired. The second checkbox ticks, but does not change background color. Upon clicking again, it un-ticks and changes to the desired background color (yet it is not selected). A 3rd checkbox is not selectable whilst two are already selected.
Requesting: Help to achieve the desired, thank you!
Fiddle: http://jsfiddle.net/0fkn1xs4/
Code:
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
}
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected < selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
});

$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
}
$(this).closest("li").toggleClass("checked", this.checked);
});
A slightly cleaner implementation that does what you want. Check out the JSFiddle

Try this:
$('input.playerCheckbox').on('change', function (event) {
var selectableFriends = 2;
if ($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
} else {
$(this).closest("li").toggleClass("checked");
}
numberCurrentlySelected = $('.playerCheckbox:checked').length;
});
Check it out here: JSFIDDLE

$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
var numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected > selectableFriends) {
this.checked = false;
}
if(numberCurrentlySelected <= selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
});
I just changed the second part to <= rather than < and then created the numberCurrentlySelected variable earlier on so that you aren't calling querying more than once. Caeths is better though instead of using a second if statement it just uses an else, makes sense and gets rid of a comparison.

DEMO
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected <= selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
$(this).closest("li").removeClass('checked');
}
});

This works in Fiddler for ya.
$('.playerCheckbox').change(function() {
if($('.playerCheckbox:checked').length > 2) {this.checked = false; }
else{
if( this.checked == true ) {$(this).closest("li").addClass("checked");}
if( this.checked == false ) {$(this).closest("li").removeClass("checked");}
}
});

FadeIn multiples of 6 divs at a time with click

I have this code below that basically gets a number of elements and stops them at 6 items. I have then got a button that when clicked loads in remaining divs.
I just want it to load in 6 divs at a time. Does anyone know the way forward to do this at all?
Here is the javascript:
function click_load() {
var count = 0;
var item = $('.newsmainimages');
//var itemClick = $('Load More');
$(item).each(function() {
if (++count == 6) {
$(this).parent().append('<div class="nextClick">Load More</div>');
}
else if (count > 6) {
$(this).css('display','none');
}
});
$('.nextClick a').click(function() {
$(item).each(function(item) {
$(this).delay(200*item).fadeIn("slow");
});
alert(item);
return false;
});
}
Cheers

You can use slice for this kind of things
DEMO
$(function(){
var count = 6;
showListItems(0 , count);
$('button').click(function() {
showListItems(0, ($('ul li:visible').length) + count);
});
function showListItems(firstNumber, lastNumber)
{
$('ul li').slice(firstNumber, lastNumber).fadeIn("slow");
}
});​

How to add an attribute and remove the attribute with an onchange event?

I have multiple selects and would like to add or remove a name attribute depending on the option that is chosen in the first select.
Here is a fiddle for an example:
http://jsfiddle.net/Nirvanachain/DZFFe/

You just had a few things backwards and you forgot the '.' in the class selector: $('.class'). I fixed the fiddle: http://jsfiddle.net/DZFFe/7/
$("#mySelect").change(function() {
$(".selectorClass").removeAttr("name");
var x = document.getElementById("mySelect").value;
if($("#" + x)) {
$("#" + x).attr("name", "myName");
}
});
​

This should work:
$("#mySelect").change(function() {
var x = $(this).val();
if ($("#" + x).length > 0) {
$("#" + x).attr("name", "myName");
} else {
$(".selectorClass").removeAttr("name");
}
});​

Something like the following?
$("#mySelect").change(function() {
$('.selectorClass').removeAttr('name');
$('#' + $(this).val()).attr('name', 'myName');
});
​
http://jsfiddle.net/DZFFe/8/

there were problems when !!x === false (ex: empty string in this case). I added a simple check on the if
I also added a missing . to select by class
$("#mySelect").change(function() {
var x = document.getElementById("mySelect").value;
if(x && $("#" + x)) { //added to check if x != ""
$("#" + x).attr("name", "myName");
} else {
$(".selectorClass").removeAttr("name"); //added missing "." to actually select classes
}
});
Here is a jsFiddle