javascript - jQuery 点击函数 - 获取这个的 ID

Question

我已经编写了自己的 jQuery 点击函数，但由于未知原因，它不起作用。我在第 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
            }
        });
    });
}

你能帮帮我吗？

Answer 1

解释

this第 4 行返回(或是)一个对象，它是一个 DOM element (例如 <div> 或类似的东西)您不能比较对象 this和字符串 "#Block3" .

这两件事有很大的不同。这就像比较梨和苹果。

看看JavaScript Data Types我想，它可以帮助你。

文档

请参阅 this 的文档对象。

获取元素的 ID How can I get the ID of an element using jQuery?

编辑您的代码

您必须获取对象的ID (this)，然后将其与字符串"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
            }
        });
    });
}

编辑您的代码 2

jQuery 可帮助您减少代码量。花点时间看看一些教程。

你的代码可以缩短成这样

$('.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>

具有无限数量的“ block ”。 See Rory's answer!

.click 与 .on

也请学会使用

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

代替

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

说明 here我想，您稍后就会明白。

编辑您的代码 3

或者您可以将函数基于“ block ”div index (= 父元素下的位置数) 而不是 index。因此，您不必为每个 block 都使用 ID。

$('.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>

喜欢 jQuery。和平!