使用className和空字符串（「」）。

-3

我正在處理4個非常相似的圖像/圖標。當用戶點擊其中一個圖像時，它會變得飽和並突出顯示，直到點擊另一個圖像（然後該圖像將飽和並突出顯示），它一切正常，但是因爲我在其他地方發現了這個小片段，並且因爲我在我的考試項目中使用它，我需要能夠解釋代碼。我很難掌握className屬性，而我也發現它有點奇怪，在本例中它被設置爲空字符串（「」）。使用className和空字符串（「」）。

的HTML：

<div id="slideshow"> 
    <ul> 
     <li><img id="one" onclick="saturate(this); display(this);" src="../images/efficiency.png" alt="efficiency"/></li> 
     <li><img id="two" onclick="saturate(this); display(this);" src="../images/educated_team.png"></li> 
     <li><img id="three" onclick="saturate(this); display(this);" src="../images/profitable_options.png"></li> 
     <li><img id="four" onclick="saturate(this); display(this);" src="../images/strategic_solutions.png"></li> 

    </ul>

而且JS：

var current = document.getElementById('one'); 

function saturate(now) { 

    if (current != null) { 
     current.className = ""; 
    } 

    now.className = "saturate"; 
    current = now; 

}

任何人都可以在簡單的話，解釋這是如何工作的？這是如何使單個圖像一次飽和成爲可能（就像點擊時突出顯示的菜單項一樣）？此外，now.className = "saturate";是做什麼的？我的意思是，在這種情況下，「飽和」這個詞是我自己的功能嗎？最初，四個圖像之一有一個class="saturate"，我隨機嘗試刪除，整個事情仍然有效，所以我認爲上述飽和的詞可能與此有關。（我也在我的CSS中設置.saturate，這是獲得80％額外飽和度的地方）。如何從<li><img id="one"刪除class="saturate"後，這種效果仍然有效..我真的不明白。

來源

2014-06-18 Luckytechy

可能有一些CSS讓這些圖像在具有該類名稱時顯得飽和 –

正如您已經提到的，CSS類類saturate用於應用視覺效果。

應用該類的任何元素（例如class="saturate"）都會產生影響。

如果我正確理解你的JavaScript，它所做的全部工作就是在單擊元素時從元素中添加或刪除該CSS類。

空字符串（current.className = ""）只是一種從元素中移除所有CSS類的方法。因此，如果用戶點擊並且已有CSS類的元素（例如class="saturate"），則該類將被刪除，從而消除該效果。

您問爲什麼當從元素的標記中刪除class="saturate"時效果仍然有效。這是因爲單擊元素將重新應用該類，如上所述。

來源

2014-06-18 22:04:32

<img … onclick="saturate(this); display(this);" …>

在這裏您可以指定被點擊時的圖像（onclick），該saturate()函數被調用。該函數用所謂的參數調用，即this。在這種情況下，this指的是被點擊的元素，即<img>元素。

現在，讓我們在saturate()功能看看：

function saturate(now) { … }

功能是一個參數，命名爲now定義。這意味着先前傳遞給函數的參數（this，即點擊<img>）現在可通過名稱now訪問。所以如果我們在這個函數裏面，並且我們談到now，我們實際上是指被點擊的<img>。

讓我們暫時略過幾行，稍後我們會回到這一點。

now.className = "saturate";

我們在這裏說的是什麼，是的now的className（在<img>）應該成爲saturate。這類似於手動添加類，如下所示：<img class="saturate">。您的文檔可能包含一些CSS，它指定saturate類的一些CSS（在您的CSS中查找.saturate）。運行這行代碼後，該CSS將應用於圖像。

current = now;

該行表示，我們將有一個新的名字，叫current，這指的是同樣的事情now。由於now參考<img>剛剛點擊，current現在將引用該相同的圖像。

因爲變量current被定義在函數的外部（在JavaScript的第一行），所以它是一個所謂的全局變量。這意味着current將永遠存在，也是在該函數執行完成之後。所以只要我們不改變current，它會繼續參考點擊的<img>。

現在假設您單擊另一個<img>。上述同樣的情況，但我們現在就來看看我剛剛跳過線：

if (current != null) { 
    current.className = ""; 
}

（請記住，這些都是在saturate()功能第一線他們在別人面前這樣執行。）

我們在這裏看到的是，我們首先使用if (current != null)檢查current是否爲空。既然我們知道current是指我們之前點擊過的<img>，我們知道它不是空的。

然後執行下一行：current.className = ""。此行將的className（實際上是之前點擊的<img>）更改爲空。換句話說，它刪除了之前點擊<img>時應用的saturate類。現在<img>將不再飽和。

之後，其他兩行被執行，導致新點擊的<img>變得飽和並被分配到current。

來源

2014-06-18 22:13:17 Jonathan

使用className和空字符串（「」）。

回答

相關問題