jquery var and $(var).css

Question

I have this code:

$(document).ready(function() {
  $('.fa-crosshairs').click(function() {
    $('*').click(function() {
      var currentclass = $(this).attr('class');
    });
  });
  $('#1color').click(function() {
    $('body').css({
      "background-color": "black"
    });
  });
});

I need to get currentclass var, then use it instead of $('body').css, but i dont know how i have to do it.

The point is to get one element by clicking, and then, change its css when i click on ('#1color')

Answer 1

Declare the variable globally.

Here's an example of how you could do this.

$(document).ready(function() {
  var elem;
  $('.fa-crosshairs').click(function() {
    elem = this;
  });
  $('input').click(function() {
    $( elem).css({
      "background-color": "teal",
      "color": "white"
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="fa-crosshairs">One</div>
<div class="fa-crosshairs">Two</div>
<div class="fa-crosshairs">Three</div>
<div class="fa-crosshairs">Four</div>
<div class="fa-crosshairs">Five</div>
<div class="fa-crosshairs">Six</div>
<input type="button" value="Change" />

Answer 2

The variable var currentclass = $(this).attr('class'); is declared inside a function. so that it is accessible inside the function where it is declared. The scope of the variable is inside that function. You need to declare the variable as GLOBAL VARIABLE so that it is accessible outside the function. SCOPE OF A VARIABLE