javascript「this」未能鎖定目標

第一個例子我做錯了什麼？它不是瞄準跨度並應用背景顏色。但第二個例子效果很好javascript「this」未能鎖定目標

1st。

if($(".done").length > 0) { 
     $(this).css("background","red"); 
    }

2nd。

if($(".done").length > 0) { 
     $(".done").css("background","red"); 
    }

來源

2011-08-29 halliewuud

您需要展示更多代碼。我們無法讀懂你的想法。 – zzzzBov

向我們展示html加上整個函數 –

在JS中的'this'的好文章：http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/ –

this值不受僅僅作爲運行的影響通過jQuery選舉人。實際上，在特定函數的範圍內，您無法完全改變this的值。

你可以試試這個：

if($(".done").length > 0) { 
    $('done').each(function() { $(this).css("background","red"); }); 
}

最佳緩存$(".done")的事情，當然。在這種情況下，如果這真的是所有的代碼，那麼無論如何也沒有理由對該長度進行測試。

來源

2011-08-29 22:23:25 Pointy

我認爲你甚至不需要那個'if'條件 –

不需要if條件，也不需要'.each方法調用。 –

@Darin Dimitrov當然是，但最初的問題類型 - 要求解釋爲什麼沒有設置this。從更大的意義上說，你是對的 - 只要'$（'。done'）.css（'background'，'red'）;'是所有需要的。 – Pointy

$(this)範圍是迭代雖然對象列表功能可

如.each()，.exists()等，而不是簡單的if/else條件

什麼應該工作是這樣的：

$(".done").each(function(){ 
    $(this).css("background","red"); 
});

來源

2011-08-29 22:23:21

編輯前我喜歡你的答案，但無論如何感謝你 – halliewuud

你可以簡單地替換整個if條件：

$(".done").css("background", "red");

如果沒有元素匹配你的CSS選擇器會返回一個空數組，什麼都不會發生。如果有匹配的元素，紅色背景顏色將應用於所有元素。

就您對this變量的問題而言，它通常在匿名回調中可用，但不在if條件中。

來源

2011-08-29 22:24:21

ty但我正在尋找刪除元素，如果它被發現，CSS只是爲了看它的目標是否正確 – halliewuud

@halliewuud $（「。done」）。remove（）; – fvu

this引用並定位當前選定的對象/元素。您if語句不選擇任何內容：

if($(".done").length > 0) { // tests if $('.done') exists, but doesn't select the objects. 
    // therefore the 'this' doesn't target/refer to anything 
    $(this).css("background","red"); 
}

嘗試，而不是：

if ($('.done').length) { 
    $('.done').css('background-color','red'); 
}

JS Fiddle demo。

值得一提的是，雖然if測試由$('.done')選擇返回的對象的存在，如果你省略if測試，並選擇不匹配任何東西，jQuery將不會引發錯誤，它只需執行任何操作（JS Fiddle demo）。

在它並不難用普通的JavaScript來實現相同的結果這種特殊情況：

var doneClassElem = document.getElementsByClassName('done'); 

for (i=0; i<doneClassElem.length; i++){ 
    doneClassElem[i].style.backgroundColor = 'red'; 
}

JS Fiddle demo。

來源

2011-08-29 22:24:53

jQuery只在回調中綁定到這個，但你根本沒有使用回調函數。

$('.done').click(function() { 
    $(this).hide() 
});

一種常見的方法，以防止調用$()功能在代碼中過liek這是結果緩存到本地變種。

var $done = $('.done') 
if ($done.length > 0) { 
    $done.css('background', 'red'); 
}

有點風馬牛不相及，但你並不需要做的length檢查。即使jQuery選擇器匹配零項，您也可以安全地調用該集合上的其他jQuery方法而不會出錯。

此外，你應該在這裏使用CSS類，而不是像這樣編輯內聯樣式。然後使用addClass()使其成爲您的樣式表中具有紅色顏色的類。

然後所有這些代碼變得很簡單只是：

$('.done').addClass('myClassThatMakesItRed');

來源

2011-08-29 22:25:32

如果這是整個代碼的，然後它不會工作，因爲this將是全局對象，這可能是在瀏覽器窗口。

當您使用jQuery綁定到事件時，事件處理函數的上下文已更改，因此會觸發事件觸發的元素。

您的代碼可以更好地表現爲

$(".done").css("background", "red")

既然你不真的需要檢查是否有相匹配的任何元素。

來源

2011-08-29 22:27:38

這是什麼這是你的第一個例子ambigous。請注意，這個是屬於任何函數的調用上下文。如果你在jQuery的事件處理程序中使用那個代碼sniplette，那麼它就會工作。

例子：

// won't work 
function red() { 
    // this = window -- in this case 
    $(this).css("background","red"); 
} 
red(); 

// works 
$(".done").click(function() { 
    // this = $(".done") -- set by jQuery 
    $(this).css("background","blue"); 
});

來源

2011-08-29 22:30:04 Art

什麼this是不受if聲明。按照您的方式編寫相同的代碼，但採用不同的方式可能會讓您更清楚。

您的代碼是：

if($(".done").length > 0) { 
    $(this).css("background","red"); 
}

您預計this提到的$(".done")陣列。以下是語義上完全一樣：

var l = $(".done").length; 
var z = 0; 
if(z < l) { 
    $(this).css("background","red"); 
}

什麼this是指在該例子嗎？

在這兩個示例中，this引用相同的內容：可能是HTML頁面的window對象。你看，this引用你的代碼運行的函數的父對象。

嘗試以下操作：

<script> 

    alert(this == window); // true 

    function function1(){ 
     alert(this == window); // true 
    } 
    function1(); 


    // now let's create our own instance of an object 

    var myObject = new Object(); 

    myObject.method1 = function(){ 
     alert(this == myObject); // true 
    } 

    myObject.method1(); 

</script>

希望這有助於。

來源

2011-08-29 22:45:36

javascript「this」未能鎖定目標

回答

相關問題