I'd like toggle the class of an element on click but it looks like jQuery only sees what class the element started out as and isn't reading in the change.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".red").click(function(){
$(this).addClass("green");
$(this).removeClass("red");
});
$(".green").click(function(){
$(this).addClass("red");
$(this).removeClass("green");
});
});
</script>
<style>
.green {
color: green;
}
.red {
color: red;
}
</style>
</head>
<body>
<p class="green">I should toggle red/green</p>
</body>
</html>
How can I properly toggle the class of an element each time it's clicked?
you need to use toggleClass()
$(document).ready(function(){
$(".red, .green").on('click',function(){
$(this).toggleClass("green red");
});
});
You need to use .on, as you are modifying the classes dynamically.
$(document).ready(function(){
$(document).on("click", ".red", function(){
$(this).addClass("green");
$(this).removeClass("red");
});
$(document).on("click", ".green", function(){
$(this).addClass("red");
$(this).removeClass("green");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document.body).ready(function(){
$(document.body).on('click',"button",function(){$(this).toggleClass("red green");})
});
</script>
<style>
.red {
font-size: 120%;
background: red;
}
.green{
background:green;
}
</style>
</head>
<body>
<button class = "green">Toggle class "green" for p elements</button>
</body>
</html>
Related
I'm trying to execute a function by clicking on a span, but it tells me that it is undefined.
$(document).ready(function() {
function callTo(param) {
alert(param);
}
});
.file-up {
background: #f5f5f5 none repeat scroll 0 0;
border: 1px solid #ccc;
color: #383f45;
font-size: 12px;
margin-bottom: 10px;
padding: 6px;
font-size: 10px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
<div>
<span class="file-up" onclick="callTo('test')">Click to call</span>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>
sample
</title>
</head>
<body>
<script>
function callTo(param) {
alert(param);
}
</script>
<div>
<span class="file-up" id="index" onclick="callTo('test')">
Click to call
</span>
</div>
</body>
This is a working example without using jQuery, just by vanilla javascript. Insert it and use it directly.
If you want me to post an answer which uses only jQuery for the stated task that you want to accomplish then please let me know.
This is code using jQuery, as you asked -
<!DOCTYPE html>
<html>
<head>
<title>
sample
</title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#index').click (function callTo() {
alert("Your values is :"+ $(this).data("value"));
});
});
</script>
<div>
<span class="file-up" id="index" data-value="test">
Click to call
</span>
</div>
Try to move your function definition away from $(documents).ready
<script>
function callTo(param) {
alert(param);
}
</script>
Or define event listener like
<script>
$(document).ready(function() {
$('.file-up').click(function() {
//action
});
});
</script>
(I'd better give it an id in this case and change the selector to #id instead of .file-up because other elements can have the same class applied)
I don't really know why this isn't working but I'm new to javascript so I'm sure I made a mistake.
I have a button and when clicked I want the div to disappear but when I click on the button nothing happens.
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
};
<div id="welcome-div">
<p>Welcome</p>
</div>
<a href="#" id="begin-button" class="intro-button"/>Begin Tour</a>
You are missing jQuery library in your code snippet.Add <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> to include jQuery library
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
};
$(document).ready(function() {
$('#begin-button').click(function() {
$('#welcome-div').hide();
});
});
//^....... missing ')'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="welcome-div">
<p>Welcome</p>
</div>
<a href="#" id="begin-button" class="intro-button" />Begin Tour</a>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hide</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
label input[type="file"]
{
display: block;
margin-top: -20px;
opacity: 0;
}
</style>
<script>
$(window).ready(function() {
$(document).delegate('#hide','click',function(){
$('#spanFileName').hide();
});
});
</script>
</head>
<body>
<p id='hide'> Click for hide</p>
<span id='spanFileName'>Hide me</span>
</body>
</html>
I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>
How do you make a link that when pressed, displays more information about something without reloading the page? (i believe it is called overflow?)
an example would be here:
https://market.android.com/details?id=com.jiwire.android.finder&feature=featured-apps
click the MORE button under the Description section, and more description is showed and the entire webpage's content slides down WITHOUT need to reload
Thanks!
Make use of this
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; float:left; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
</script>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").show("slow");
} else {
$("div").slideUp();
}
});
</script>
</body>
</html>
Alright, so the green square is suppose to show when your mouse is on the red square, but it doesn't. Here is the code:
<html>
<head>
<script type="text/javascript"
src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("a").bind("mouseover",
function(){
$("b").css("display", "block");
});
$("a").bind("mouseout",
function(){
$("b").css("display", "none");
});
});
-->
</script>
</head>
<body>
<div class="a" style="background-color: #ff0000; height: 50px; width: 50px;"></div>
<div class="b" style="display: none; background-color: #00ff00; height: 50px; width: 50px;"></div>
</body>
</html>
Put a dot before each selector to form a class selector:
$(".a").bind("mouseover",
function(){
...
Your code can be reduced to this:
$(document).ready(function() {
$(".a").hover(function() {
$(".b").toggle();
});
});
http://jsfiddle.net/karim79/EkA6p/1/
Should be $(".a"). the selector needs a period. Where if you had id="a" then you would use ("#a"), but just doing $("a") will actually select all links i.e. <a href="">
http://jsfiddle.net/hZL94/
you need to set the class .a .b
<script type="text/javascript">
$(document).ready(function() {
$(".a").bind("mouseover",
function(){
$(".b").css("display", "block");
});
$(".a").bind("mouseout",
function(){
$(".b").css("display", "none");
});
});
</script>
It's becasue you try to select the <a> and <b> elements, instead of the <div class="a"> and <div class="b"> elements. $('.a') instead of $('a'). See jsFiddle.
$(document).ready(function() {
$(".a").bind("mouseover", function() {
$(".b").css("display", "block");
});
$(".a").bind("mouseout", function() {
$(".b").css("display", "none");
});
});
try this
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#a").bind("mouseover",
function(){
$("#b").css("display", "block");
});
$("#a").bind("mouseout",
function(){
$("#b").css("display", "none");
});
});
</script>
</head>
<body>
<div id="a" style="background-color: #ff0000; height: 50px; width: 50px;"></div>
<div id="b" style="display: none; background-color: #00ff00; height: 50px; width: 50px;"></div>
</body>
</html>