JQuery Get attribute value even if it changes
I have the following:
JavaScript:
$(".bg .thumb_wrapper").click(function() {
$(".bg .thumb_wrapper").removeClass("active");
$(this).addClass("active");
});
Therefore, every time I click on a new background, it is highlighted and assigned the class "active", and the previous active class is removed.
Now all I have to do is create a variable and set it to the data-name attribute for this active element.
Here is the HTML:
<div class="thumb_wrapper active">
<img src="images/backgrounds/thumb/bg2.jpg" data-name="bg2.jpg">
</div>
So, if I put it in a click function, it works fine:
var bg = $(".bg .thumb_wrapper.active img").attr("data-name");
console.log(bg);
so every time it is clicked it tells me the value. But I need to access this variable outside of this function .. so it must be global.
Is there anything I can do to grab the data-name value at the top of the page and not in the click function? And when I click new BG and the active class is updated, will the variable be updated as well?
Hope this makes sense.
Thank!
source to share
Declare a variable outside of the function, so its scope is not limited to the click handler.
var bg;
$(".bg .thumb_wrapper").click(function() {
$(".bg .thumb_wrapper").removeClass("active");
$(this).addClass("active");
bg = $(".bg .thumb_wrapper.active img").data("name");
});
console.log(bg); //accessible outside
If you want the value to be bg
updated every time a new BG is clicked, you must do the assignment in the click handler as above.
source to share
All you have to do is define the variable outside of the click handlers, but presumably in $(document).ready()
, but update it in different click handlers (or whatever handlers you use):
$(document).ready(function(){
var bg = $(".bg .thumb_wrapper.active img['data-name']").attr("data-name") || '';
/* all the other JavaScript/jQuery, click handlers and so forth... */
});
In this case, the variable will be equal to the data-name
img attribute with data-name attribute
or, if one does not exist, an empty string will be set.
source to share
You have two options for what you need,
- Define
var bg
in the global scope and update it inside the handler.click
- Just call
$(".bg .thumb_wrapper.active img").attr("data-name");
when you want to know the meaning.active
data-name
CODE:
var bg;
$(function () {
$(".bg .thumb_wrapper").click(function() {
$(".bg .thumb_wrapper").removeClass("active");
$(this).addClass("active");
bg = $(this).attr("data-name");
});
});
source to share
first of all, use $ (el) .data ("name") to get the value of the data attributes, not .attr, and if you do this at startup, it will get the value if any;
Javascript is functionally limited, which means that when you define it in a click handler function, you won't have access from outside of that function. Instead, define a variable and assign it in a higher scope like DOM Ready like so:
$(function() {
var bg = $(".bg .thumb_wrapper.active img").data("name");
});
bg will have a value when the page is loaded .. And is accessible from any internal functions such as click handlers.
source to share
If I understand your question correctly, you want to create and set a bg variable on page load and then update it every time thumbnail is clicked?
If so, this should work:
$(document).ready(function() {
var bg = $(".bg .thumb_wrapper.active img").attr("data-name");
$(".bg .thumb_wrapper").click(function() {
$(".bg .thumb_wrapper").removeClass("active");
$(this).addClass("active");
bg = $(this).attr("data-name");
});
});
source to share