We Keep Coding

Jquery Function add class and remove class on multiple buttons but only execute specific button clicked

Hello I seem to be stuck on this certain code. I have multiple buttons on my website that when you click one, it changes classes & the text inside then revert back after clicking again. It seems to only work on one button but there are multiples of buttons with the same ID & when they are clicked nothing happens. Heres the codeenter code here
$('#btnInfo').click(function()
{
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});
Im not to sure only one button gets the function while the others stay the same when i click them but I want all the buttons to execute the code above but onlt to the button i specifically clicked with the ID

First, you cannot have more than one element with the same "ID", so use class instead.
I think what you want is to bind the event click to all your buttons, do this instead.
$('.className').on('click', function(e){
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});
Check the link for more info : http://api.jquery.com/on/

It's unclear what you are looking exactly
If you are looking for this functionality for all the buttons, you need something like this.
$('button').click(function() //see changed css selector
{
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});

Your selector is an id #btnInfo in the below line
$('#btnInfo').click(function()
This will select only one button. Use a class, .btnInfo and add it as class attribute to the buttons

Change .prev() button to disabled on click of another button

I have two buttons and I need one to stay disabled until the other is active. And then I need that same button to become inactive and go back to a previous class if the first button is clicked/toggled again. I only have have access up to jQuery 1.7.2:
<button class="primaryClass" value="primary"></button>
<button class="linkClass" value="link"></button>
Thus far I tried this but it does not seem to be working:
$('.linkClass').on('click touchend',function() {
if($(this).hasClass('linkClass')) {
$(this).prev('.primaryClass').addClass('disabled');
e.preventDefault;
}
if($(this).hasClass('linkClass-active')) {
$(this).prev('.primaryClass').removeClass('disabled');
});
So basically, the user clicks the button with linkClass the button with primary class becomes enabled because the disabled class is removed. If the user clicks it again, then the primaryClass button again becomes disabled. Any ideas what I am doing wrong?

Your question is fairly vague, please try to make a fiddle. As far as I can tell you should be setting .prop("disabled", true); to make the button disabled. If you don't have a css .disabled class, you won't see it, that and you should always use built in functionality.

Instead of adding the class you can disable the button using the disabled property. This will prevent clicks on the button from firing any event handlers.
$('.linkClass').on('click touchend',function() {
var primary = $("button.primaryClass");
primary.prop("disabled", !primary.is(":disabled"));
});
JS Fiddle: http://jsfiddle.net/6SNQS/2/

use toggleClass
http://api.jquery.com/toggleclass/
$('.linkClass').on('click touchend',function() {
$(this).prev('.primaryClass').toggleClass('disabled');
e.preventDefault;
});
The part with 'linkClass-active' I don't understand so I left that out.
If you want to also toggle the disabled property use this:
$('.linkClass').on('click touchend',function() {
var $target = $(this).prev('.primaryClass');
$target.toggleClass('disabled');
$target[0].disabled = !$target[0].disabled;
e.preventDefault;
});
fiddle: http://jsfiddle.net/Yyk2G/
By the way, why are you setting value? its not an input its a button tag.

You mean like this DEMO:
html
<button class="primaryClass" disabled="disabled" value="primary">Bye</button>
<button class="linkClass" value="link">Hi</button>
js
$('.linkClass').on('click touchend',function() {
$(this).prev().prop('disabled', function(idx, oldAttr) {
return !oldAttr;
});
});
jQuery attr() takes a callback. So you can use that to your advantage.

this in onclick with JQuery

I have 25 buttons like this:
<button class="Bouton_Clavier" onclick="Click_Bouton('Bouton-Name')">
Bouton-Name</button>
I want to change button style when i click on (only fort the clicked button).
So, the function is :
function Click_Bouton(Nom)
{
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
}
But it doesn't work.
If I change the function with :
function Click_Bouton(Nom)
{
$('button').click(function(){ $('button').removeClass('Bouton_Clavier')
.addClass('Bouton_Clavier_Select');
});
}
All buttons style are changed and its work after 2 clicks.
But I need to change only the style of clicked button.

Either manually set a context as Paul Draper did in his answer or (better) don't use inline event handlers:
$(".Bouton_Clavier").click(function () {
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
});

It's because this is not set to what you think it should be.
<button class="Bouton_Clavier" onclick="Click_Bouton.call(this, 'Bouton-Name')"> Bouton-Name </button>
Also, I feel obligated to recommend not using onclick=, and instead using $.click.
Oh, and you don't seem to be doing anything with your argument Dom.

Change the button css after click event fired like this,
$(".Bouton_Clavier").click(function(){
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
});
And in the last part of your code you mention $('button') that points to all buttons within your document. And that's why all button styles are changed on button click.
Demo

Prevent default function using only child pseudo selectors

I am using jQuery to dynamically add elements every time a user clicks a link (".add-event"). Also included in this element is a icon to remove the entire element if the user chooses. I want to hide or disable this remove icon if the element is the last left on the page. This is what I have tried so far:
$(document).on('click','.close_box2:only-child',function(){
event.preventDefault();
});
AND
if( $('.event').length===1) {
$('.close_box2').hide()
}
HTML:
<div class="event">
<span class="close_box2"><i class="icon-remove"></i></span>
<span class="add-event">Add Event</span>
</div>
What am I doing wrong!? Thanks

JSFiddle: http://jsfiddle.net/TrueBlueAussie/KPY9r/6/
You just want to check for the "last one" inside the delete handler:
// initial hide of sole close button
$('.close_box2').hide();
// On add, clone the template and show all close buttons
$(document).on('click', '.add-event', function () {
// Create a new event based on the template
$('#events').append($('#template').html());
// Show all close buttons (as we must now have > 1 event)
$('.close_box2').show();
});
$(document).on('click', '.close_box2', function (e) {
$(this).closest('.event').remove();
// Is there only one left?
if ($('.event').length === 1) {
// Hide the close box on the last event
$('.close_box2').hide()
}
});
Notes:
I use a dummy <script> element to hold you HTML template. This is better than cloning an element on the page and much better than inline HTML strings in your code.

The following looks better regarding performance:
$('.close_box2:only-child').on('click', function(event){
event.preventDefault();
});

Jquery click function only gets called once

I am trying to use JavaScript to implement a functionality. I have an icon on my html page (div tag). and I want to implement the functionality that when I click on it once it changes to another icon. But the condition it when i click on that changed icon, it should revert back to the original icon.
Now, here is the problem, the icon changes to another icon on first click but it does not revert back to original icon on second click. Actually, its jquery's click function is not getting called when i click it second time.
any ideas?
Following is the code:
$("#volume-slide-img").hide();
$("#volume-icon").click(function() {
if (document.getElementById('volume-slide-img').style.display == 'none') {
$("#volume-slide-img").show();
}
else {
$("#volume-slide-img").hide();
}
});

You can make your code a lot simpler. Try this:
$('#volume-slide-img').hide();
$('#volume-icon').click(function(){
$('#volume-slide-img').toggle();
});

I think what you want to do is toggle the class on #volume-icon when it is clicked.
I mocked it up on jsFiddle. When the icon is clicked, toggleClass will do what it says, toggle a class (if it is applied, unapply it, if not, apply it). The class can be used to set the icon.
I might be missing something though...you say "I have an icon" and you want to do something "when I click on it" but your code sample seems to change something else when the icon is clicked.

#Don Zacharias nailed it, but I found some pretty volume icons so here's a similar approach to his but with background images.
http://jsfiddle.net/pxfunc/xbUQZ/
HTML:
<div id="volume-icon" title="click to toggle!"></div>
CSS:
#volume-icon {
width:256px;
height:256px;
cursor:pointer;
background-image:url('http://icons.iconarchive.com/icons/icons-land/vista-multimedia/256/Volume-Hot-icon.png')
}
#volume-icon.mute {
background-image:url('http://lh3.ggpht.com/_uU5cLRayUdQ/S48MYDVnjlI/AAAAAAAADik/GWYRNg06mhE/Volume-Normal-Red-icon.png');
}
jQuery:
$('#volume-icon').click(function() {
$(this).toggleClass('mute');
});