How to use .hasClass with $(this)?

Question

I have a header on my page, and block with boxes. That boxes represents my projects. When I click on one of them it is suppose to change my header background.

<div class="row">
      <div class="job-one one-half column" onclick="headerProjBackground()">
        <p>First</p>
      </div>
      <div class="job-two one-half column" onclick="headerProjBackground()">
        <p>Second</p>
      </div>
</div>

And my function:

function headerProjBackground(){
 if($(this).hasClass('job-one')){
  console.log('Hi!');
  $('header').css('background-image': 'url(css/images/first-thing.png)');
 }
 if($(this).hasClass('job-one')){
   console.log('Hello!');
  $('header').css('background-image': 'url(css/images/second-thing.png)');
 }
}

But it is not working. It can't understand my (this). There are no errors in the console. So this is logical mistake.

the problem is that you don't pass `this` into `headerProjBackground` handler — hindmost, Oct 05 '15 at 15:44
Bind event using jQuery as `$('.column').on('click', function() {` — Tushar, Oct 05 '15 at 15:44
Possible duplicate of [onClick to get the ID of the clicked button](http://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button) — Mr Lister, Oct 05 '15 at 15:47

score 1 · Answer 1 · answered Oct 05 '15 at 16:00

Onlcick attribute in Javascript by default Runs under Window, that means "this" object in the the function will always be window and as it doesn't have any class associated with it, so it will always give false in both if statement.

Refer below updated code snippet -

$('.jSelector').click(function(){

 if($(this).hasClass('job-one')){
  console.log('First Clicked!');
 }
 if($(this).hasClass('job-two')){
   console.log('Second Clicked!');
 }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
      <div class="job-one one-half column jSelector">
        <p>First</p>
      </div>
      <div class="job-two one-half column jSelector">
        <p>Second</p>
      </div>
</div>

Hope this helps!!

Anders · Accepted Answer · 2015-10-05T16:03:33.227

Outside of the onclick attribute, this is no longer defined. You can fix this in (at least) two ways.

Alt 1: Pass this as a parameter:

<div class="job-one one-half column" onclick="headerProjBackground(this)">

function headerProjBackground(clicked) {
    //Replace this with clicked in the code of the function.

Alt 2: Do the event binding with jQuery instead of with HTML attributes:

<div class="job-one one-half column backgroundchanger">

$(".backgroundchanger").click(function() {
    //Put the same code as for headerProjBackground() in your question.
    //Here you can use the this keyword.
});

And some further thoughts: The way you have coded this is not very good if you want it compact (and clear). So lets try to improve it some! If you go with Alt 2 you could use a custom data- attribute to shorten the code:

<div class="one-half column" data-background="css/images/first-thing.png">

//If something that has the data-background attribute is clicked.
$('[data-background]').click(function() {
    //Get the value from the data-background attribute, and use that as background image.
    var background = $(this).attr('data-background');
    $('header').css('background-image': 'url(' + background + ')');
});

Or, if you use Alt 1, you could just pass the desired background url as a parameter instead of this.

the thing is that i want to do that as compact as possible because if i will have 20 of them i will do 20 different functions! — Godje, Oct 05 '15 at 15:54
No, both solutions work for all of them. For instance, in alternative 2 the selector `.backgroundchanger` matches all divs with that class, so as long as you add that class (and remove the `onlick` attribute) everything should be fine without repeating any JS. — Anders, Oct 05 '15 at 15:56
Magic The last one is super clear. I can't even believe that StackOverflow so helpful! — Godje, Oct 05 '15 at 18:57

score 0 · Answer 3 · answered Oct 05 '15 at 15:58

You can remove the onclick attribute on your divs and add the following, also the .css method has two parameters with comma between them.

<script type="text/javascript">
    // once the dom is ready
    $(document).ready(function() {
        // check if any of the divs with column class is clicked
        $('.column').click(function() {
                // trigger the function and pass the (this) which is the object for the div clicked
                headerProjBackground(this);
        });
    });

// element passed will be worked on in the function
function headerProjBackground(element){
    if($(element).hasClass('job-one')){
        console.log('Hi!');
        $('header').css('background', '#000');
    }
    
    if($(element).hasClass('job-two')){
        console.log('Hello!');
        $('header').css('background', '#DDD');
    }
}
</script>

How to use .hasClass with $(this)?

3 Answers3