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>