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

说明

第4行的

this返回（或是）一个对象，它是DOM element（例如<div>或类似的东西）你不能比较对象this和字符串"#Block3"。

这两件事情非常不同。这就像比较梨和苹果。

看看JavaScript Data Types我认为，它可以帮到你。

文档

请参阅this对象的文档。

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

的ID

编辑代码

您必须获取对象的 ID （此），然后将其与字符串“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>

无限个“块数”。 See Rory's answer!

.click vs .on

另请学习使用

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

而不是

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

解释here我想，您稍后会理解。

编辑代码3

或者您可以将功能基于“阻止”div 索引 （=父元素下的位置数）而不是索引。因此，您不必为每个块使用 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。和平！

Answer 2

您的代码中的

this是DOMElement。当强制转换为字符串时，它永远不会匹配#Block3，因此您的if条件永远不会发生。

假设您尝试匹配特定元素的id，那么您只需要与id的{​​{1}}属性进行比较：

this

另请注意，在所有(var i = 1; i <= 3; i++){ $("#Block" + i).click(function(){ $(this).effect("shake", function(){ if (this.id === "Block3") { window.open('contact.html', 'blank'); } }); }); } 元素上放置一个公共类并在所有元素上使用单个事件处理程序将是很多更好的做法：

#BlockX

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