I want to apply cursor: pointer; to any element that has jQuery click() function bound to it.
How can I do this without going to each element in my CSS file and manually adding cursor: pointer; to it? (I have a lot of various clickable items)
<span class = "clickable1">something</span>
<span class = "clickable2">something</span>
<span class = "clickable3">something</span>
$(".clickable1").click(function(){
//do something
});
$(".clickable2").click(function(){
//do something
});
$(".clickable3").click(function(){
//do something
});
You actually can do this.
By checking the internal $._data you can get the bound events on any element, then it's just a matter of checking if click is one of those events and attaching the style etc.
$('*').filter(function() {
var d = $._data( this, "events" );
return d && 'click' in d;
}).css('cursor', 'pointer');
FIDDLE
Add another class called isclickable so you would have
<span class = "isclickable clickable1">something</span>
<span class = "isclickable clickable2">something</span>
<span class = "isclickable clickable3">something</span>
Then you can have .isclickable { cursor: pointer; } in your css
Solution 1: give every clickable element the same class like
<span class = "clickable clickable1">something</span>
<span class = "clickable clickable2">something</span>
<span class = "clickable clickable3">something</span>
Solution 2: expand jQuery selector $(".clickable1, .clickable2, .clickable3")
Why not add a common class to all of them?
<span class = "clickable clickable1">something</span>
<span class = "clickable clickable2">something</span>
<span class = "clickable clickable3">something</span>
Then, with css:
.clickable {
cursor: pointer;
}
If you'd rather not change the HTML you already have manually (or if you can't), you can add the class when binding the event handlers:
function addClickBehavior($el, callback) {
return $el.addClass("clickable").on("click", callback);
}
addClickBehavior($(".clickable1"), function(){
//do something
});
addClickBehavior($(".clickable2"), function(){
//do something
});
addClickBehavior($(".clickable3"), function(){
//do something
});
Simply use a selector that selects all elements whose class name starts with "clickable":
$("*[class^='clickable']").css('cursor', 'pointer').click(function(){
//do something
});
BTW: Seems like a very "inefficient" use of the class attribute and class names aren't very "useful".
Related
So basically I have a bunch of nav buttons that I want to change the name of when the user clicks the button.
The original div class name is something like "home", and when the user clicks on it I want it to be "home_active" so that the CSS attributes will change the background-image.
$('.click').click(function() {
var clicked_url = $(this).attr('class');
var updated_url = clicked_url + "_active";
$(this).attr('class') = updated_url;
});
.item_active {
background-color: teal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
item 1
item 2
item 3
You shall use the .addClass() method add a class to the element:
$('.click').click(function() {
var clicked_url = $(this).attr('class');
var updated_url = clicked_url + "_active";
$(this).removeClass(clicked_url); // remove the old class
$(this).addClass(updated_url); // add the new class
});
However, as a good practice, it is better to add a modifier class, such as "active" to the existing class, preserving the original class name.
Then use the following CSS:
.click.active {
background: red;
}
The JS code would look like this:
$('.click').click(function() {
$('.click.active').removeClass('active'); // remove active class from all other nav items
$(this).addClass('active'); // add active to the nav item the users just clicked on
});
Using Jquery functions:
$(this).hasClass("className");
$(this).addClass("className");
$(this).removeClass("className");
$('.click').click(function() {
var clicked_url = $(this).attr('class');
var updated_url = clicked_url + "_active";
$(this).removeClass(updated_url)
$(this).addClass(updated_url)});
Almost there - but remember to use attr to reset the class value. And you most likely want to remove _active from the other .click elements, so this is the only one.
$(".click").click(function() {
$(".click").each(function() {
$(this).attr("class", $(this).attr("class").replace(/_active/, ""));
});
$(this).attr("class", $(this).attr("class") + "_active");
});
Not sure where class .click is but there is .item and .click(...) method is ok -- I prefer to use .on('click', ...) (see the difference between .click() and .on()).
$('.item').on('click', function() {...
Since objective is to simply change the style of a clicked link by changing its class then it's better to assign a common class (which was done: .item) and a class that sets the state (a separate class: .active).
$(this).toggleClass('active');
If you wish to apply this to additional tags, simply modify the outer selector
$('.item, :button').on('click', function() {...
The selector above will listen for clicks on anything with the class .item and any <button> and <input type='button'> tags.
It wasn't very clear what the desired behavior was so there's two demos:
Demo 1: Click any link to add/remove .active class
or
Demo 2: Click any link to add/remove .active class exclusively
Demo 1
Click any link to add/remove .active class
$('.item').on('click', function() {
$(this).toggleClass('active');
});
.active {
background-color: teal;
color: white
}
item 1
item 2
item 3
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Demo 2
Click any link to add/remove .active class exclusively
$('.item').on('click', function() {
$(this).toggleClass('active');
$('.item').not(this).removeClass('active');
});
.active {
background-color: teal;
color: white
}
item 1
item 2
item 3
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Couple things. First, you want to select elements with a class name of "item," not "click." Secondly, you were using the attr() function wrong. Instead of attr('class') = var, you want to set the var as the second parameter, e.g. attr('class', var).
Edit: Finally, you should check in your click event whether or not the link has been previously clicked (i.e. whether it already has the "_active" suffix):
$('.item').click(function() {
var clicked_url = $(this).attr('class');
var updated_url;
if(clicked_url.includes("_active")){
updated_url = "item";
}else{
updated_url = "item_active";
}
$(this).attr('class', updated_url);
});
.item_active {
background-color: teal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
item 1
item 2
item 3
I'm having trouble applying class to the previous element or the next element.
<a href="#"><span class="glyphicon glyphicon-thumbs-up up"></span>
<a href="#"><span class="glyphicon glyphicon-thumbs-down down"></span>
I want to disable the second span, when I click the first span and vice versa.
$(document).on('click','.up, .down',function (e){
e.preventDefault();
if ($(this).hasClass('up')){
var down = $(this).parent().nextAll('a.comment-vote-down');
down.removeClass('disable-link').addClass('disable-link');
}else if($(this).hasClass('down')){
var up = $(this).parent().prevAll('a.comment-vote-up');
up.removeClass('disable-link').addClass('disable-link');
}
});
example on jsfiddle
You try to find class .comment-vote-down that doesn't exist in your HTML code
https://jsfiddle.net/xnovq390/4/
try this:
$(document).on('click','.up, .down',function (e){
e.preventDefault();
if ($(this).hasClass('up')){
var down = $(".down");
down.removeClass('disable-link').addClass('disable-link');
}else if($(this).hasClass('down')){
var up = $(".up");
up.removeClass('disable-link').addClass('disable-link');
}
});
It's because you don't have an a with a class of .comment-vote-down, or comment-vote-up.
Either take that part out of your nextAll selection:
.nextAll('a');
https://jsfiddle.net/xnovq390/1/
or, add in the class to your HTML:
<a href="#" class="comment-vote-up">
https://jsfiddle.net/xnovq390/3/
If the .up element is always the previous element from the .down one, you can simply do:
$(document).on('click', '.up, .down', function(e) {
e.preventDefault();
if ($(this).hasClass('up')) $(this).next().addClass('disable-link');
else $(this).prev().addClass('disable-link');
}
$(document).on('click','.up, .down',function (e){
e.preventDefault();
if ($(this).hasClass('up')){
$(this).addClass('disable-link');
$('span.down').removeClass('disable-link');
}else if($(this).hasClass('down')){
$(this).addClass('disable-link');
$('span.up').removeClass('disable-link');
}
});
As the other answers already stated, there is no spoon element with .comment-vote-down class.
But additionally to make life easier, you could buffer the 2 elements, bind the click to them and disable the ones not clicked, reducing the code to
var btns = $('.up, .down');
btns.click(function(){
btns.not(this).addClass('disable-link');
});
fiddle
If you'd want to disable the containing a, the 'other's parent could be obtained by chaining parent() : btns.not(this).parent().addClass('disable-link'); ( or .closest('a') if there is a deeper hierarchy)
I have an event in which I need to add a class to an element with a matching class name.
For example:
<a class="one"></div>
<a class="two"></div>
<div class="one"></div>
<div class="two"></div>
How do I find and add an additional class to the element with the matching class name?
Here is my script, I need it to target the tag with matching class.
jQuery('div.two').waypoint(function(direction) {
if (direction === 'down') {
jQuery(this).addClass("active") // to <a> element that shares same class
}
else {
}
});
I'm not familiar with this plugin but I'll give it a shot. Based off what you've provided I think your problem is:
jQuery(this).addClass("active")
Since you already know the class, just do:
var tempClass = $(this).attr("class");
jQuery("a."+tempClass).addClass("active");
Just select by class names.
Array.prototype.forEach.call(document.querySelectorAll(".one"), function(el) {
el.classList.add("whateverClass");
});
Instead of a for loop, this uses the prototype method forEach with the call method to turn the NodeList into an array list, adding the class to each element with the class "one"
DEMO
You probably want to remove the class from the others first, then add to the applicable <a>
jQuery('div.two').waypoint(function(direction) {
if (direction === 'down') {
/* remove prior active class */
jQuery("a.active").removeClass('active');
/* add to current one */
jQuery("a.two").addClass('active');
}
else {
}
});
To make this more generic I would add a class like waypoint to all the content elements as well as a data-point to be able to simplify instances.
<div data-point="one" class="waypoint"></div>
JS
jQuery('.waypoint').waypoint(function(direction) {
if (direction === 'down') {
/* remove prior active class */
jQuery("a.active").removeClass('active');
/* add to current one */
var linkClass=$(this).data('point')
jQuery("a." + linkClass).addClass('active');
}
else {
}
});
So here is my dilemma. Been trucking on this Jquery extreme code here and I need help telling if a certain link is showing or not. Here is what I have.
The toggles:
<span class="icon icon84"></span>
<span class="icon icon85"></span>
(notice the only thing that is different is the icon number) These need to toggle back and forth when someone clicks the #visbilitybutton. Not sure of the best way to do this and to capture what is selected as well.
The only code I have currently makes the toggle go one way, but doesn't go back when clicked again.
$(document).ready(function () {
$('#visbilitybutton').click(function() {
$(this).replaceWith('<span class="icon icon85"></span>');
});
});
First things first, you shouldn't have multiple identical id attributes on your page. Make visibilitybutton a class.
Anyways, you can use the jQuery toggle() function to specify what to do on each consecutive click:
$(".visibilitybutton").toggle(function(){
$(this)
.attr("title","Invisible")
.find("span").toggleClass("icon84 icon85");
}, function(){
$(this)
.attr("title","Visible")
.find("span").toggleClass("icon84 icon85");
});
If you want to be more efficient, you can do it all in one fell jQuery swoop like so, with some good techniques:
var vis = ["Invisible","Visible"];
$(".visibilitybutton").click(function(){
var i = 0;
$(this)
.attr("title",vis[i])
.find("span").toggleClass("icon84 icon85");
i = (i==0)?1:0;
});
Even more so would be to make a class that hides the element when added to it and shows it when you remove it (a classname with display:none applied in the CSS works fine):
$(".visibilitybutton").click(function(){
$(this)
.toggleClass("hide")
.find("span").toggleClass("icon84 icon85");
});
You need to have unique ids; therefore, you should select the items by class. You can use toggle() to handle the consecutive clicks, and you can use toggleClass() to handle the swapping of classes.
HTML:
<span class="icon icon84"></span>
<span class="icon icon85"></span>
Javascript:
$(document).ready(function () {
$('.button').toggle(function() {
var $button = $(this);
$button.prop("title","Invisible");
$button.find('.icon85').toggleClass('icon85', 'icon84');
}, function() {
var $button = $(this);
$button.prop("title","Visible");
$button.find('.icon85').toggleClass('icon84', 'icon85');
});
});
The id attribute is supposed to be unique to each element. Change the id attribute to the class attribute for each hyperlink.
Then, in your jQuery code, get the hyperlinks by their class name:
$('.visbilitybutton').click(function() {
// code goes here
});
In your event handler, you should use test the title attribute, like so:
$('.visibilitybutton').click(function() {
$this = $(this);
if ($this.attr("title") == "Visible")
$this.attr("title", "Invisible").find("span")
.removeClass("icon85").addClass("icon84");
else
$this.attr("title", "Visible").find("span")
.removeClass("icon84").addClass("icon85");
});
I want to update this very simple JS to Mootools 1.2 and it's not easy.
This function :
function changeclass(x){
document.getElementById("content").className = "ziclass0";
document.getElementById("content").className = "ziclass" + x;
}
is triggered in the DOM by :
<div id="someclass">
a href="javascript: changeclass(0)">Unstyled</a
a href="javascript: changeclass(1)">link one</a
a href="javascript: changeclass(2)">link two</a
a href="javascript: changeclass(3)">link three</a
</div>
to call the according CSS classes like :
.ziclass1 h1{
color: rgb(142,11,0);
font-family: Verdana;
font-size: 2.5em;
letter-spacing: 0.1em;
}
and changes the layout accordingly in :
<div id="content" class="ziclass3"> ... </div>
I know I can add an event to the triggers like :
$(#someclass.each(function(element,index) {
element.addEvent('click', function(){
//some code
});
But, how do I get #content class classname ?
Through an array ?
I am a bit confused here.
I'd be really grateful for any help to set me on the right track
These are very basics of MooTools. Anyway, here's how you change a class name of a collection of elements:
$$('#container a').each(function(link){
link.addEvents({
click: function(e){
e.stop();
this.set('class', 'newClassName');
// to append a class
// this.addClass('appendThisClass');
}
});
});
Here's a working example: http://jsfiddle.net/oskar/9fxxr/
It's all in the documentation: http://mootools.net/docs/core/Element/Element
But this is not exactly what i was asking.
The triggering element (a) calls a css element by looping through its number located in "href".
EX :
a href="javascript: changeclass(1)">Link One</a
// calls all CSS classes named .ziclass1 and applies/adds them in "content"
a href="javascript: changeclass(2)">Link Two</a
// calls all CSS classes named .ziclass2 and applies/adds them in "content"
USING
function changeclass(x){
document.getElementById("content").className = "ziclass" + x;
}
RESULT :
HTML:
a href="javascript: changeclass(1)">Link One</a
a href="javascript: changeclass(2)">Link Two</a
<div id="content" class="ziclass1">
...
</div>
That's why I was thinking about an array.
Around this idea :
var myArray = ["0","1","2", etc ...];
function myFunction() {
myArray.each(function(value, index, array){
$(value).addEvent('click',function(event) {
console.log(value);
// add my class here
});
});
};
myFunction();
where I'd get the value of the array located in the href like this :
a href="1">Link one</a
a href="2">Link two</a
and change the class accordingly.
But I dont know how to do this.