I have several images with the same class and would like to set up a click function that changes the text in some elements based on which image is clicked.
My if statement is not working, I'm not entirely sure why because I've used this method before, or so I thought.
$('.gallery_image').click(function(e) {
var t = $(this);
if(t.id == 'csf') {
console.log('It works!');
}
});
JSFIDDLE
Use t.attr('id') instead of t.id
More about .attr()
An alternate solution is using classes instead of id's. Call the click function on the class they share then use a second class to distinguish them with the hasClass function:
<div id="csf" class="gallery_image csf">csf</div>
<div id="csi" class="gallery_image csi">csi</div>
$('.gallery_image').click(function(e) {
var t = $(this);
if(t.hasClass('csf')) {
alert("It works!");
}
else if(t.hasClass('csi')) {
alert("So does this!");
}
});
Related
I've got this function that adds a class to a sibling element inside the main parent.
$(document).on('click', function() {
if ($('#Correct').css('display') == 'block'){
$('div[data-answer="1"]').addClass('test-class');
} else {
}
});
When this executes, it adds a class to any div that has this attribute because the same code appears several times on the page:
[data-answer="1"]
I was wondering if it was possible to add the class only to its sibling div with that data attribute, without adding a class to all of them on the page? If that makes any sense at all? I'm new to javascript so please bear with me.
Use siblings() function of jquery
$(document).on('click', function() {
if ($('#Correct').css('display') == 'block'){
$('#Correct').siblings('div[data-answer="1"]').addClass('test-class');
} else {
}
});
Use .find() and .first() to get the first matching element only.
$(document).on('click', function() {
if ($('#Correct').css('display') == 'block'){
$('#Correct').find('div[data-answer="1"]').first().addClass('test-class');
} else {
}
});
I'm trying to append a class to a div when its click and remove when its clicked a second time I currently have this has my script -
$(".project").click(function(){
if ($(".project-expand", this).is(':visible')) {
$(".project-expand",this).hide(1000);
$('.project').delay(1000).queue(function(){
$(".project").removeClass('item-dropped').clearQueue();
});
} else if ($(".project-expand", this).is(':hidden')) {
$(".project-expand").hide(1000);
$(".project-expand",this).show(1000);
$(".project").addClass('item-dropped');
}
});
But this adds the "item-dropped" class to all of my divs that have a class "project" when I change the code to -
$(".project", this).addClass('item-dropped');
It doesn't do anything, where am I going wrong here?
Instead of using the class selector $('.project') you could simply use the target of the click event ($(this)):
$(".project").click(function () {
var project = $(this);
var projectExpand = $(".project-expand", this);
if (projectExpand.is(':visible')) {
projectExpand.hide(1000);
project.delay(1000).queue(function () {
project.removeClass('item-dropped').clearQueue();
});
} else if (projectExpand.is(':hidden')) {
$(".project-expand").hide(1000);
projectExpand.show(1000);
project.addClass('item-dropped');
}
});
Additional Info :
The reason what you were trying to do didn't work originally is because $('.project', this) looks for elements with class project inside the current element (i.e. looking for a project inside a project)
You have to use $(this) to add class on the clicked item:
$(".project").click(function(){
if ($(".project-expand", this).is(':visible')) {
$(".project-expand",this).hide(1000);
$(this).delay(1000).queue(function(){
$(this).removeClass('item-dropped').clearQueue(); // Here
});
} else if ($(".project-expand", this).is(':hidden')) {
$(".project-expand").hide(1000);
$(".project-expand",this).show(1000);
$(this).addClass('item-dropped'); // Here
}
});
you have to use :
$(this).addClass('item-dropped');
concept fiddle
Hi i have to hide contents of tab using submit button. I try to hide the contents but its not working.Even when i try to hide the contents through id the tab itself getting hide. I have same class name with different id's. So in this case how can i hide the contents using class name with their id ? Thanks.
Here is my code:
function hide_visibility(classname) { $(classname).hide(); }
$('#news .butt-rahmen').on('click', function(){
if($(this).attr('id') == 'saveId')
hide_visibility('#news .cont-liste-verlauf');
getNewsWidgetEdit();
});
The '.' is not necessary. Additionally, I'm assuming you forgot brackets around your if
function hide_visibility(selector) { $(selector).hide(); }
$('#news .butt-rahmen').live('click', function(){
if($(this).attr('id') == 'saveId') {
hide_visibility('#news .cont-liste-verlauf');
getNewsWidgetEdit();
}
});
That being said, live is deprecated, so you should use on. If you need to dynamically attach to .butt-rahman classed items under #news:
function hide_visibility(selector) { $(selector).hide(); }
$(document).on('click', '#news .butt-rahmen', function(){
if($(this).attr('id') == 'saveId') {
hide_visibility('#news .cont-liste-verlauf');
getNewsWidgetEdit();
}
});
I am currently working on a "collapse all"-button for Bootstrap 3 collapsible plugin. It seems to work fine, but only if I have got only one single collapsible on my page. When I add another one, my method will still just work in the first link item.
Here ist my JS:
$(function () {
$("#toggle-all").click(function (e) {
e.preventDefault();
var $hidden = $(this).parent().data("hidden");
if ($hidden == "false") {
$(this).parent().find(".collapse.in").each(function () {
$(this).collapse("hide");
});
$(this).parent().data("hidden", "true");
} else {
$(this).parent().find(".collapse").not(".in").each(function () {
$(this).collapse("show");
});
$(this).parent().data("hidden", "false");
}
$(this).find("i").toggleClass("fa-plus fa-minus");
});
});
And here a fiddle to try: http://jsfiddle.net/rMdLZ/
Any ideas why it does not work as expected?
Thanks,
Julian
You are using 2 id's. Id's must be unique elements on each document.
See this SE question for reference: Two HTML elements with same id attribute: How bad is it really?
Change it to Classes:
$(function () {
$(".toggle-all").click(function (e) {
e.preventDefault();
var $hidden = $(this).parent().data("hidden");
if ($hidden == "false") {
$(this).parent().find(".collapse.in").each(function () {
$(this).collapse("hide");
});
$(this).parent().data("hidden", "true");
} else {
$(this).parent().find(".collapse").not(".in").each(function () {
$(this).collapse("show");
});
$(this).parent().data("hidden", "false");
}
$(this).find("i").toggleClass("fa-plus fa-minus");
});
});
http://jsfiddle.net/vP4e9/1/
Don't use ids. Use classes and I think you should do fine.
Why?
Because the ids have to be unique through out the frame.
$('#someId') will always return you the same element, but $('.someClass') will return you all elements with someClass class
I've changed $("#toggle-all").click to $(".toggle-all").click and added the toggle-all class the the collapse all buttons. And it works fine.
Demo
I need to know where the click event happens in my document, i Have some divs , and when i press cntrl key and click on them some events will occur, i just need to know how to identify the divs which got clicked, is it possible to generalize them in document.click fn Like what i have tried.
Here is a sample of what i have tried
HTML
<div class="DivOne">Div1</div>
<div class="DivTwo">Div2</div>
<div class="DivThree">Div3</div>
Jquery
$(document).bind("click", function (e) {
if (e.which == '17') {
alert(e.parent);//I need to know Whether Click happens on divOne or Two or on No Mans Land
}
});
You can use e.target along with .is() function to achieve what you want.
Try,
$(document).bind("click", function (e) {
if($(e.target).is('.DivOne')){
alert('Div one has been clicked..!')
}
});
$("div").click(function (e) {
var classOfDiv = this.className;
// do stuff depending on what class
});
You can select classes, or ids like so
$("#DivOne").click(function (e) {
if (e.which == '17') {
alert(e.parent);//I need to know Whether Click happens on divOne or Two or on No Mans Land
}
});
or a class like
$(".DivOne").click(function (e) {
if (e.which == '17') {
alert(e.parent);//I need to know Whether Click happens on divOne or Two or on No Mans Land
}
});
Alternately you can loop through all divs on the page and test for a click
$("div").each(function () {
$(this).click(function() {
var divClass = $(this).attr('class');
alert("You clicked on " + divClass);
});
});
Fiddle