jQuery clicking function - get ID of this

Question

I've written my own jQuery clicking function, but for an unkown reason, it doesn't work. I get error on line 4.

for (var i = 1;i<=3;i++){
    $("#Block"+i).click(function(){
        $(this).effect("shake", function(){
            if (this == "#Block3"){
                window.open('contact.html','blank');//open link link in a new page
            }
        });
    });
}

Could you please help me?

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

Explanation

this on line 4 returns (or is) an object, it is a DOM element (such as <div> or something like that) You can't compare object this and string "#Block3".

These two things are very different. It is like comparing pears and apples.

Take a look at JavaScript Data Types I think, it could help you.

Documentation

See the documentation of this object.

Getting ID of an element How can I get the ID of an element using jQuery?

Edit of your code

You have to get the ID of the object (this) and then compare it with the string "Block3"

for (var i = 1; i <= 3; i++) {
    $("#Block" + i).click(function() {
        $(this).effect("shake", function() {
            if (this.id == "Block3") {
                window.open('contact.html', 'blank'); //open link link in a new page
            }
        });
    });
}

Edit of your code 2

jQuery is here to help you to do less of code. Take a while to look at some tutorials.

Your code could be shortened to something like this

$('.blocks-container').on('click', '.block', function() {
  $(this).effect('shake', function() {
    if (this.id == 'Block3')
      window.open('contact.html', 'blank'); //open link link in a new page
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blocks-container">
  <div id="Block1" class="block">Block1</div>
  <div id="Block2" class="block">Block2</div>
  <div id="Block3" class="block">Block3</div>
  <div id="Block4" class="block">Block4</div>
  <div id="Block5" class="block">Block5</div>
</div>

With unlimited number of "Blocks". See Rory's answer!

.click vs .on

Also please learn to use

$('.blocks-container').on('click', '.block', function() {});

Instead of

$('.block').click(function() {});

Explanation here I think, that you will understand later.

Edit of your code 3

Or you can base your function on "Block" div index (= number of place under the parent element) instead of index. So you don't have to use ID for each of blocks.

$('.blocks-container').on('click', '.block', function() {
  $(this).effect('shake', function() {
    if ($(this).index('.block') == 2)
      window.open('contact.html', 'blank'); //open link link in a new page
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blocks-container">
  <div class="block">Block1</div>
  <div class="block">Block2</div>
  <div class="block">Block3</div>
  <div class="block">Block4</div>
  <div class="block">Block5</div>
</div>

Love jQuery. Peace!

@sapir-sosnovsky if I helped you, please accept my answer. thanks — jmeinlschmidt, Jan 22 '17 at 15:31

score 2 · Answer 2 · answered Jul 09 '16 at 19:16

this in your code is a DOMElement. When coerced to a string it will never match #Block3, hence your if condition never hits.

Assuming you're trying to match the id of a specific element, then you just need to compare against the id property of this:

(var i = 1; i <= 3; i++){
    $("#Block" + i).click(function(){
        $(this).effect("shake", function(){
            if (this.id === "Block3") {
                window.open('contact.html', 'blank');
            }
        });
    });
}

Also note that it would be much better practice to put a common class on all the #BlockX elements and use a single event handler on all of them:

$('.block').click(function() {
  $(this).effect("shake", function(){
    if (this.id === 'Block3')
      alert('you clicked block3!');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="Block1" class="block">Block1</div>
<div id="Block2" class="block">Block2</div>
<div id="Block3" class="block">Block3</div>
<div id="Block4" class="block">Block4</div>
<div id="Block5" class="block">Block5</div>