javascript function using jquery addClass() method does not add class

Question

The script works, creates everything correctly, etc., but the jquery addClass method isn't adding the class. I'm new to using jquery methods in a javascript function, any help is appreciated, including alternate methods for adding the appropriate classes without using jquery.

function thumbnail(Img, Element, Modal, ModalTitle) {
"use strict";
/*jslint browser:true*/
/*global $, jQuery*/
//this function will append an anchor tag with the appropriate functionality, accepting inputs on the image filename, attaching element, and modal
//Img = full filename in format of foo.png
//Element = the ID of the element within which the thumbnail anchor will be placed
//Modal = the ID of the modal
//ModalTitle = Text used for title of the modal and title of the caption
var image, element, modal, loc, output, iUrl, modal_loc, modal_output, mtitle;
image = Img;
element = Element;
modal = Modal;
mtitle = ModalTitle;
iUrl = "/design-library/images/thumbs/" + image;
output = "<a href='#' data-reveal-id='" + modal + "'>";
output += "<img class='sample_img' src='" + iUrl + "' alt='" + mtitle + "' />";
output += "</a>";
output += "<p class='caption'>" + mtitle + "</p>";
modal_output = "<h1>" + mtitle + "</h1>";
modal_output += "<img src='" + iUrl + "' alt='" + image + "' /><a class='close-reveal-modal'>&#215;</a>";
//create the modal container
$(modal).addClass('reveal-modal');
modal_loc = document.getElementById(modal);
modal_loc.innerHTML = modal_output;
//the end of the script gets the element and adds the anchor tag that exists in output
$(element).addClass('samples');
loc = document.getElementById(element);
loc.innerHTML = output;
}

Please regards, how could you call thumbnail function? the parameters that you supply it. — SaidbakR
– SaidbakR, Commented Dec 13, 2012 at 14:13
SEMSEM, like this: 'thumbnail('page_schedule.png','thumb1','modal_2','Schedule Page');' — Mike Earley
– Mike Earley, Commented Dec 13, 2012 at 14:17

Andrei · Accepted Answer · 2012-12-13 14:13:42Z

5

Since modal and element are IDs, you should correct your selectors to use them as ones:

$('#' + modal).addClass('reveal-modal');
$('#' + element).addClass('samples');

Side note. Once you have found the DOM element with jQuery, there is no need to perform the second search with getElementById:

var modal_loc = $('#' + modal);
modal_loc.addClass('reveal-modal');
modal_loc.html(modal_output);

answered Dec 13, 2012 at 14:13

Andrei

56.8k10 gold badges92 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Earley Over a year ago

So, thanks for the additional help! This was exactly it, and I award it the answer over the others because of the additional mods. Thank you again.

David Hellsing · Accepted Answer · 2012-12-13 14:13:43Z

2

if modal is an ID string, you need to do:

$('#'+modal).addClass('reveal-modal');

answered Dec 13, 2012 at 14:13

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

1 Comment

Mike Earley Over a year ago

Thank you! I missed how to use a string in the jquery call.

Pow-Ian · Accepted Answer · 2012-12-13 14:13:31Z

1

Try changing:

$(element).addClass('samples');

to

$('#' + element).addClass('samples');

answered Dec 13, 2012 at 14:13

Pow-Ian

3,6351 gold badge25 silver badges32 bronze badges

2 Comments

Mike Earley Over a year ago

Thanks! I appreciate the clue-in on using a variable for the jquery.

Pow-Ian Over a year ago

no problem. The hardest part for me when starting to use jQuery was learning the selectors. This is a bit of a curve and it can be daunting.

Collectives™ on Stack Overflow

javascript function using jquery addClass() method does not add class

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related