why is this code not targeting the right selector - javascript

This function is supposed to change the background color of the object being clicked
function colorMe(){
$(this).css('background-color', 'red');
}
I call it like this
$('.colorme').click(colorMe);
and it changes the background of this div
<div class="colorme">Color Me</div>
The problem is that I want to do something else before running colorMe. So I can't use just $('.colorme').click(colorMe);. What I'm trying to do is something like this
$('.colorme').click(function(){
alert('something happens first, then colorMe is called');
colorMe(); //I call colorMe here..
$(this).colorMe(); //I also tried this, but it's not working
});
but it's not affecting the div. I think it lost track of the div to affect. Do I need to pass it and how?

function colorMe(elt){
$(elt).css('background-color', 'red');
}
$('.colorme').click(function(){
alert('something happens first, then colorMe is called');
colorMe(this); //I call colorMe here..
});
To call a function on a jQuery object like you did here
$(this).colorMe()
you would have to build a plugin (I edited it to add a class)
// css
.red {
background: red;
}
// js
(function($) {
$.fn.extend({
colorMe: function() {
this.addClass("red");
},
unColorMe: function() {
this.removeClass("red");
}
});
})(jQuery);
Then you would be able to do
$(".a_class").colorMe();
$(".a_class").unColorMe();

You should use the .addClass() method.
function colorMe(element){
element.addClass('my-red-class');
}
$('.colorme').click(function(){
colorMe(this);
});
And in your css file you have a class called 'my-red-class' (use a better name!)
.my-red-class { background-color: red; }
And you can also easily remove the css:
function unColorMe(element){
element.removeClass('my-red-class');
}

function colorMe(){
$(this).css('color', 'red');
}
using call()
$('.colorme').click(function(){
alert('something happens first, then colorMe is called');
colorMe.call(this);
});

Related

Call single function for multiple classes

I have two buttons: one with class btn-star, and the other with btn-current. I am calling an independent function on each of their clicks. But now, I want to call only one function when they are called.
My code is similar to this:
$('document').ready(() => {
$(document).on('click', '.btn-star', function () {
// Do stuff
}
$(document).on('click', '.btn-current', function () {
// Do stuff
}
}
You can try this code. You can use multiple elements click event for one action with only one line code, Just use a comma for separating elements
$('document').ready(() => {
const myFunction= () => {
// Your Code here...
}
$(document).on('click', '.btn-current, .btn-current', function () {
myFunction();
}
}
You can define a function separately and pass it in as callback for both buttons' on click handler. For example -
$('document').ready(() => {
const commonFunc = () => {
// do common stuffs here
}
$(document).on('click', '.btn-star', commonFunc());
$(document).on('click', '.btn-current', commonFunc());
}
Hope that helps!
If you want to call the same function you can select your two button classes, using a simple j-query expression:
$('.btn-star, .btn-current').click(function() {
// Do stuff
}
Ad your selectors separated by a comma, inside the quotation marks.
You can read more about j-query selector at this link:
https://www.sitepoint.com/comprehensive-jquery-selectors/
A little shorter code...
$('document').ready(() => {
function commonFunc() {
//do stuffs here
}
$('.btn-star, .btn-current').on('click', commonFunc);
}
you can try like this:
function test()
{
//your code
}
$(".btn1, .btn2").on("click", funciton(){
test();
});
Try below code
$('.btn-star, .btn-current').on('click', function () {
// Do shared stuff
});
Reference: http://api.jquery.com/on/
Why is [Javascript] tagged on this post? If it is meant to be there, I'm assuming you are going to accept javascript responses right?
If you're going javascript, it is much easier, and you can just add a onClick='function()' to your html code and do your functions in there.
<html>
<head>
<script>
function buttonFunction(buttonName){
//EDIT 3.0: You can make one button do the same as the other button, but you can also make it do something else at the same time!
if(buttonName == 'btn-star'){
//other code such as:
alert("Stars are awesome!");
}
alert("You just clicked " + buttonName);
}
</script>
</head>
<body>
<div id='button1'>
<button id='btn-star' onclick='buttonFunction("btn-star")'>btn-star</button>
</div>
<br/>
<div id='button2'>
<button id='btc-current' onclick='buttonFunction("btn-current")'>btn-current</button>
</div>
</body>
</html>
If you want, you can also additionally make one button do the same as the other, and then after that do something different like I did in this snippet.
P.S: I'm just assuming javascript is allowed, because after all, it is tagged on this post.
EDIT: I showed you an example of one button doing slightly differently then the other, but still the same in a way
ANOTHER EDIT: You can do a lot of stuff with this, added ideas on what else you could do with this snippet.
You can try
$('.btn-star , .btn-current').on('click', function () {
//do something common for elements
});

jQuery .get not working

I have the following code that I run whenever the .information element is clicked. I am trying to add the aboutMe.html document to the #text element when the .information is clicked:
$(".information").click( function() {
$.get("aboutMe.html"), function(data){
$("#text").html(data);
}});
For some reason the document is not added to the page when .information is clicked.
Your parentheses and braces are wrong. It should be:
$(".information").click( function() {
$.get("aboutMe.html", function(data){
$("#text").html(data);
});
});
Your callback function was outside the argument list of $.get().
Hope this will work for ýou
$(function() {
$('.information').click(function(){
$('#text').load("aboutMe.html");
});
});

Toggle window.location in jQuery/javascript

What I am trying to achieve is that whenever you click an image, it changes the window.location url, toggling it between '#' and '#footer'. Right now, all I have is this:
<script>
function clickarrow(){
var rd=Math.floor(Math.random()*11)
if (rd > 5){
window.location="#footer";
}
else{
window.location="#";
}
}
</script>
As you can see, this makes a 50:50 chance of either change being made. It works as a temparary fix, but sometimes you have to click up to 6 times for it to take effect.
Is there a way of doing this that properly toggles the window.location?
I am using jQuery 1.9.
If you're trying to reliably toggle the hash, rather than using a random chance, try something like this:
function clickarrow(){
var showFooter = true;
return function () {
if (showFooter) {
window.location.hash = "footer";
} else {
window.location.hash = "";
}
showFooter = !showFooter;
}
}
jQuery(function () {
jQuery('#myToggleLink').click(clickarrow());
});
Note: Normally when binding events, a function reference must be passed in. Here, I'm invoking clickarrow() since it returns a function by design. The returned function encapsulates the toggle variable via closure.
you can use data attribute to tell what is next step:
$('#arrow').click(function() {
if ($(this).data('footer'))
{
window.location="#footer";
$(this).data('footer', 'false');
alert('b');
}
else
{
window.location="#";
$(this).data('footer', 'true');
alert('a');
}
});

Minimize click()

$(this).click(function() {
clicked($(this));
});
How do I minimize this code to one line?
Tried this - doesn't work:
$(this).click(clicked(this));
It will be used then like this:
function clicked(element) {
element.css('...');
// some other code
}
You can pass the clicked function directly:
$(this).click(clicked);
but you'll need to change your clicked function to wrap the element.
function clicked() {
$(this).do("whatever")
}
Regarding your updated question, you can have clicked return a function if you want.
function clicked(element) {
return function() {
element.css('...');
// some other code
}
}
So then you can do this:
$(this).click(clicked($(this)));
But I'd personally change your clicked function to work like the first version.

check for className before running the function

How can I achieve this?
for each pages I have attached a unique class-name so I can target them by css later.
body.pageHome
about.pageAbout
contact.pageContact
I want to run a function but only targeting the homepage.
eg.
if($('body').hasClass('pageHome')) {
callMe;
}
function callMe() {
alert('I am Home!');
}
It looks like you're close. To call callMe, you'll want parenthesis to indicate that it's a function call:
if($('body').hasClass('pageHome')) {
callMe();
}
Your forgot the parenthesis when you called callMe:
function callMe() {
alert('I am Home!');
}
if($('body').hasClass('pageHome')) {
callMe();
}
Does that help?
Concept should work fine as long as you are wrapping code in
$(function(){ /* run code*/ })
and you need to add "()" to callme();

Categories

Resources