I have two button when i click one one of them class "active-1" add to body
and another button, class "active-2" add to body.
When i want to get one of this class, don't work.
I use this code to get class "active-2":
if ( $("body.active-1").hasClass("active-2") ) {
// Do Somtihng
}
what is the problem and what is the expected behaviour?
try this,
$(document).ready(function(){
$('.button').click(function(){
console.log($(this).attr('id') + ' class added');
$('body').removeAttr('class').addClass($(this).attr('id'));
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button class="button" id="active-1">active-1 add</button>
<button class="button" id="active-2">active-2 add</button>
Related
<button
type="button"
class="blue"
data-events="click:onAddNote"
data-events-target="cpoe-LabResultDetailView"
>
Add Note
</button>
I'm trying to simulate / prompt a click of this button when I press a shortcut key sequence. However, I haven't been successful with anything other than through the class "blue", which works but also activates something else. How do I target the "data-events" or "data-events-target"?
Is there a way to something similar to:
$("click:onAddNote").trigger("click");
You can use querySelector and select the button with its attributes
var button = document.querySelector('[data-events="click:onAddNote"]');
button.onclick = ()=>console.log('Clicked');
button.click()
<button
type="button"
class="blue"
data-events="click:onAddNote"
data-events-target="cpoe-LabResultDetailView"
>
Add Note
</button>
Why not just this?
const button = docuemnt.querySelector('button')
button.click()
There are many ways to select the <button> element.
Method-1
In the example below, the click event is fired by selecting the first <button> element with the .blue class style applied.
let button = document.getElementsByClassName('blue');
button[0].addEventListener('click', function() {
console.log("clicked");
});
<button type="button" class="blue">Add Note</button>
Method-2
The click event of the <button> element with the .blue class style applied using jQuery can be rendered as follows:
$(".blue").on('click', function(event) {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="blue" data-events="click:onAddNote" data-events-target="cpoe-LabResultDetailView">Add Note</button>
Targeting the "data-events" attribute is simple, like this ...
$('button[data-events="click:onAddNote"]').on('click', function(){
console.log('clicked!');
});
<button
type="button"
class="blue"
data-events="click:onAddNote"
data-events-target="cpoe-LabResultDetailView"
>
Add Note
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
See the jquery documentation for more information on running handlers -- Here
How will I add a class to the clicked button and remove a class to the previously clicked button. I want to have a single active button only per click
My html looks like this
<div class="nav-button">
<button id="btn-all">All</button>
<button id="btn-chicken">Chicken</button>
<button id="btn-pizza">Pizza</button>
<button id="btn-pasta">Pasta</button>
<button id="btn-drinks">Drinks</button>
</div>
And my jquery looks like this
$('.nav-button button').on('click', function(){
$(this).addClass("active")
})
I dont want to select the buttons one by one because this group of button is dynamic. I just only use the html example above to show my buttons in html
You can simply first remove the class from all buttons:
$("div.nav-button button").removeClass('active');
So you can do:
$('.nav-button button').on('click', function(){
$("div.nav-button button").removeClass('active');
$(this).addClass("active");
})
.active {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-button">
<button id="btn-all">All</button>
<button id="btn-chicken">Chicken</button>
<button id="btn-pizza">Pizza</button>
<button id="btn-pasta">Pasta</button>
<button id="btn-drinks">Drinks</button>
</div>
I use a checkbox to overwrite a database entry, it looks something like this:
[ ] Overwrite
[Submit]
I want to change the checkbox and submit button to a single button like this:
[Overwrite]
The Checkbox Overwrite function works like this in js:
if(jQuery("#overwrite").prop("checked")){
data+="&overwrite=on";
}
And looks like this in html:
<input type="checkbox" id="overwrite" name="overwrite"> Overwrite
I tried doing following in js to use a button instead of a checkbox:
jQuery('#overwrite').click(function(){
data+="&overwrite=on";
});
And in html the button looks like this:
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary">Overwrite</button>
The Button won't work, if I click it, nothing happens. what am I doing wrong?
It could be simply as a toggled button using a simple class for the display like the example below shows :
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
//data+="&overwrite=on";
console.log( "overwrite=on" );
}
});
.selected{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary">Overwrite</button>
var data = "";
$('#overwrite').on('click', function() {
if (!$(this).hasClass('overwrite')) {
data += "&overwrite=on";
}
$(this).toggleClass('overwrite');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary">Overwrite</button>
I want to change the button's value with fading effect when i click on it. My code is:
html:
<button> some value </button>
script:
$(document).ready(function(){
$("#btn_1").click(function (){
$(this).prop('value', "new value!"); // line1
});
});
From another stackoverflow answer, I found that if i replace line1 with $(this).find('span').html('Collapse').hide().fadeIn('slow');
and change the html part to <button> <span> some value </span> </button> it works. However, is there a way to achieve the transition effect using jquery without using span tags ?
Do you want something like this?
just use $(this).text('new value!').hide().fadeIn('slow');
$(document).ready(function() {
$("#btn_1").click(function() {
$(this).text('new value!').hide().fadeIn('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_1"> some value </button>
You can set text property of button. and you can fadeOut and fadeIn
$(document).ready(function(){
$("#btn_1").click(function (){
$(this).text("You Clicked").fadeOut().fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_1">Click HERE</button>
I would like to write a JS that changes text on a button when clicked (to 'SHOW'), but when another button is clicked then the previously clicked button will change its text from 'SHOW' to initial text (eg 'A')
Scenario:
1. click on button A -> 'A' changes to 'SHOW'
2. click on button B -> 'B' changes to 'SHOW' but also 'SHOW'(from button A) changes back to 'A'
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Above you will find example buttons i have in html file.
In JS file i have:
$("button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
previously i used class selector not id one, but still could not accomplish what i wanted. The add and remove CSS works really ok
I think this is what you are looking for:
$("button").click(function() {
var clicked_button = $(this);
$("button").each(function() {
if($(this).is(clicked_button)) {
$(this).text('SHOW');
}
else {
$(this).text($(this).attr('value'))
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Check working example here https://jsfiddle.net/prxd81vk/
You already have your solution, because when you add a class to the last pressed button, you can use it to change the text back:
$("button").on('click', function () {
$('.btn_click')
.text($('.btn_click').val())
.removeClass('btn_click');//this is a css class that changes bgcolor
$(this).addClass('btn_click');
$(this).text('SHOW');
});
You must use $("#button1") to properly select the button by id. This onClick is not actually associated to any of the buttons.
You need to keep track of the old text of the button and revert back to it when another button is pressed.
Example:
$("button").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$("[data-old-text]").each(function () {
$(this).text($(this).attr("data-old-text"));
$(this).removeAttr("data-old-text");
});
$(this).addClass('btn_click');
$(this).attr("data-old-text", $(this).text());
$(this).text('SHOW');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">A</button>
<button id="button2">B</button>
<button id="button3">C</button>
Use this :
Button 1 click :
$('#button1').click(function () {
$('#button1').text('Show');
});
Buttton 2 click :
$('#button2').click(function () {
$('#button2').text('show');
$('#button1').text('old value');
});
I would change targeting elements from id to class attribute.
<button class="button" value="A">A</button>
<button class="button" value="B">B</button>
<button class="button" value="C">C</button>
The script would then first clear the 'btn_click' class from any other buttons, and then apply the 'active' class to the button that was clicked.
$("button").on('click', function () {
$('.button').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
To select element by ID you must use $("#button1").
Try like this:
$("#button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
And after that add whatever you want to do with other two buttons (set A,B,C).
You can try this code..
<script>
$(document).ready(function()
{
$('#button1').click(function()
{
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('Show');
$('#button2').text('B');
});
$('#button2').click(function()
{
$('#button1').text('A');
$(this).text('Show');
});
});
</script>