JQuery Get attribute value even if it changes

I have the following:

enter image description here

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!

+3


source to share


5 answers


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.

Live example

+1


source


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.

0


source


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");
  });
});

      

0


source


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.

0


source


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");
    });
});

      

0


source







All Articles