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元素 （例如<div>或类似的东西）。您不能将对象this与字符串"#Block3" 。

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

看一下我认为的JavaScript数据类型 ，它可以为您提供帮助。

文献资料

请参阅此对象的文档。

获取元素的ID如何使用jQuery获取元素的ID？

编辑您的代码

您必须获取对象的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> 

具有无限数量的“块”。 看到罗里的答案！

.click与.on

还请学习使用

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

代替

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

我想在这里进行解释，以便您稍后理解。

编辑您的代码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的属性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!'); }); }); 

 <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>