This my js code:
i want to click first button to call a new class,it works but, every
button doing same work. when i click second button this also calling
a new class.please help me to solve this.
<script>
$(document).ready(function(){
$("button").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
</script>
this my html code:
<button>first</button><br>
<button>second</button><br>
<button>third</button><br>
<div class="new" style = "display: none;">hi.</div> <!--i need to call only this class-->
<div class="old">hello.</div>
You have to set an id to that particular button and then attach click event handler to that particular button using id. Here is the code.
<button id ='myBtn' >first</button><br>
$("#myBtn").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
You can use contains('first').
The thing is that your using button as selector, that will not understand which button is clicked actually.
I would recommend, To make jQuery understand you should provide any specific id to that element.
But if you want to do it based on the text inside a DIV, you can use contains('first').
$(document).ready(function(){
$("button:contains('first')").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>first</button><br>
<button>second</button><br>
<button>third</button><br>
<div class="new" style = "display: none;">hi.</div> <!--i need to call only this class-->
<div class="old">hello.</div>
$(document).ready(function() {
$("button").eq(0).click(function() { /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button>first</button>
<br>
<button>second</button>
<br>
<button>third</button>
<br>
<div class="new" style="display: none;">hi.</div>
<!--i need to call only this class-->
<div class="old">hello.
</div>
use .eq() to select which button you need the click
Note: eq() is index based which starts with 0
With $("Button") you are referring to the Button element and not a certain Button so every button will do the same action. You should give your Buttons an id and then call them based on their Id.
Like:
<button id="firstBtn">first</button><br>
<button id="secondBtn">second</button><br>
<button id="thirdbtn">third</button><br>
And then call them with the id selector # like so: $("#firstBtn").click()..
Remove the inline style and use a separate css class
$(document).ready(function() {
$("button").click(function() { /*button click event*/
$(".new").toggleClass('hide'); /*new class calling */
});
});
CSS
.hide {
display:none;
}
JSFIDDLE
If you want to click first button to call a new class , you can do by many ways .Here is checking with clicked text to get first button click
<script>
$(document).ready(function(){
$("button").click(function(){ /*button click event*/
if ($(this).text() == "first" ) $(".new").toggle(); /*new class calling */
});
});
</script>
set id is the better
<button id="first">first</button><br>
<button>second</button><br>
<button>third</button><br>
<script>
$(document).ready(function(){
$("#first").click(function(){ /*specific button click event*/
$(".new").toggle(); /*new class calling */
});
});
</script>
give id's to the buttons, n call those accordingly like
$("#first").click(function(){
$(".new").toggle();
});
Related
On a page, I have multiple button but with same class, and I want to add class loading on each button click.
$(".btn").click(function() {
$(".btn").addClass('loading');
alert("button 1 clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div>
Button 1
Button 2
Button 3
Button 1
</div>
How to handle for different button clicked so each time button is clicked the same alert will appear?
You can make use of this operator. Within the below example, this refers to the current object being handled.
See Mozilla Docs
<div>
Button 1
Button 2
Button 3
Button 1
</div>
$(".btn").click(function() {
$(this).addClass('loading');
alert("button 1 clicked");
});
You want the this keyword it refers to the object its within in this case the element clicked
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
$(".btn").click(function() {
this.classList.add('loading')
});
.loading {background: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div>
Button 1
Button 2
Button 3
Button 1
</div>
use this keywoard this
$(".btn").click(function() {
$(this).addClass('loading');
});
$(".btn").on('click', function() {
$(this).addClass('loading');
alert("button clicked");
});
Give them the same class and it should work.
<div id="mydiv"><div>
<button style="visibility:hidden; float:left"></button>
I wanna make the hidden button as is clicked when someone click the div "mydiv".
As AndrewL said, you don't need a button for this. But if you want to use a button anyways, simply assign a eventListener to your div that simulates a click on the button:
document.querySelector('#mydiv').addEventListener('click', () => {
document.querySelector('button').click();
});
Example
(I added some CSS rules and an extra function for visualization.)
document.querySelector('#mydiv').addEventListener('click', () => { // Listen for clicks on the div
document.querySelector('button').click(); // Simulate a click on the button
});
function test() { // This function gets called when clicking the button
console.log("Click!");
}
<div id="mydiv" style="height: 100px; width: 100px; background-color: red;">
<div>
<button style=" visibility:hidden; float:left; " onclick="test()"></button>
</div>
</div>
You dont need a hidden button for this. Just assign a click listener to the div itself using js like this:
const btn = document.getElementById('mydiv');
function doSomething(){
//run your script here when div is clicked
}
btn.addEventListener('click', doSomething);
You don't really need the hidden button to catch the click event. But if you really need it:
<div id="mydiv" onclick="document.getElementById('btn').click()">click on me<div>
<button id="btn" style="display:none;" ></button>
With jQuery, you can do something like this:
$('#div_id').click(function(){$('#btn_id').trigger('click');});
$('#btn_id').click(function(){//Business logic here on btn click
});
I have 4 divs like this, with class work:
<div class="work">
<img src="panda.jpg">
<h3>Panda</h3>
<p>Panda eats apple.</p>
</div>
And I want to toggle clicked class to clicked div:
.clicked {
font-size: 25px;
}
How to do it?
$('.work').on('click', function() {
$(this).toggleClass('clicked');
})
Geez, why couldn't you just go check the documentation!
There is a function in jquery named toggleClass.
You should attach a click event to your div and then use this to reference to the clicked element.
$('.work').click(function() { // edited: from $(.work) to $('.work')
$(this).toggleClass("click")
})
Here you go with a solution https://jsfiddle.net/7ep3e4gn/
$('div.work').click(function(){
$(this).addClass('clicked').siblings('div.work').removeClass('clicked');
});
.clicked {
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
<img src="panda.jpg">
<h3>Panda</h3>
<p>Panda eats apple.</p>
</div>
<div class="work">
<img src="panda.jpg">
<h3>Panda2</h3>
<p>Panda2 eats apple.</p>
</div>
<div class="work">
<img src="panda.jpg">
<h3>Panda3</h3>
<p>Panda3 eats apple.</p>
</div>
I've used addClass & removeClass along with jQuery siblings method.
Hope this will help you.
Jquery has a method just for that.
$('.work').click(function(e) {
$(e.target).closest('.work').toggleClass('clicked');
});
The .closest() is in case the click was registered on the contained image, etc.
If you want only one of the div's with the class .work to have the .clicked class at a time, here's what you do:
$('.work').on('click', function() { //When the div 'work' is clicked
$('.work').removeClass('clicked'); //Remove the class 'clicked' from all divs named 'work'
$(this).addClass('clicked'); //Add the class 'clicked' to the div that was clicked.
});
Here's a fiddle for the same.
I'm trying to make some elements active when I click on a link. I'm at this code right now which let's me add and remove active class when I click on element with class 'test'. What I need is to click a link and have the same behaviour to the div elements.
I have:
$('.test').on('click',function(){
$('.test.active').removeClass('active');
$(this).addClass('active');
});
.active{
color: #F00;
}
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href=''>Click me</a>
This code adds and removes the active class when I click the divs. How to do the same thing by clicking the link?
When you click a link, the behavior and the method will be the same as if you click a button, a div, or any other element of the page.
The difference is that an <a> element will redirect you to another page (inclusive if it's "the same" where you come from) and the changes won't be noticeable.
You will need to use $("element").addClass("class");
Add href="javascript:;" if to avoid redirection.
In jQuery below snippet will work:
$('.link').on('click', function(){
$(this).toggleClass('active');
})
Working Fiddle
Update
To highlight multiple divs
$('.link').on('click', function(){
if($('.test.active').next().hasClass('test'))
{
$('.test.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.test.active').removeClass('active');
$('.test:first').addClass('active');
}
})
Updated Fiddle
Your code should be:
$('.link').on('click', function () {
var $nextActive = $('.test.active').next('.test').length ? $('.test.active').next('.test') : $('.test').first();
$('.test.active').add($nextActive).toggleClass('active');
return false;
});
You can do like following. It will add and remove active class on link click.
$('.link').on('click', function(){
$('.active').removeClass('active').siblings('.test').addClass('active');
});
.active{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href='#'>Click me</a>
Edit:
This will work for infinite div.
JQuery:
$('.link').on('click', function(){
if($('.active').next().hasClass('test'))
{
$('.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.active').removeClass('active');
$('.test:first').addClass('active');
}
});
Fiddle
Just remove .active class.
below code is working.
$('.test').click(function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
replace js function
$('.test').on('click',function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
Demo Link https://jsfiddle.net/ffjcfb2b/
According to your post and comments you'd like to use link as class changer for divs. Here you go. Edited!
$('.link').on('click', function(){
$('.test.active').toggleClass('active').next().addClass("active");
});
Working fiddle
I saw a post earlier today and have been playing around with: http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html
What I'd like to be able to do is when a span gets clicked, to fire the click event on a different element in the page:
<div class='editable sampleItem pointer' id='qqq'>click me!!!</div>
Is that possible?
sure..
$('.myspan').click(function(){
$('.different-div').click();
})
$('.different-div').click(function(){alert('div click fired')});
Check like this,
HTML:
<div class='editable sampleItem pointer' id='qqq' onclick='clickHandler()'>click me!!!</div>
Javascript:
<script type="text/javascript">
function clickHandler() {
/* You code here */
}
</script>