爲什麼我的jQuery toggleClass不工作？

我幾乎不熟悉jQuery，並且在點擊時將圖像放大到其大小的100％時遇到問題。我已經無數次地看了一小段代碼，看起來應該是這樣。這裏是jQuery的：爲什麼我的jQuery toggleClass不工作？

$(document).ready(function() { 
    $('img.gallery').click(function() { 
     $(this).toggleClass('enlarge'); 
    }); 
});

的CSS：

img.gallery { 
     border: 1px solid #aaaaaa; 
     width: 260px; 
     height: 260px; 
    } 

    .enlarge { 
     width: auto; 
    }

我是否鏈接到庫和腳本是否正確？

<link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <script type="text/javascript" src="gallery.js"></script>

完整的CSS沒有上面的代碼片段是在這裏：http://ruzzio.net/style.css

我想知道如果事情在CSS中，從擴大上點擊保持圖像（假設我的jQuery是準確的）。

感謝您提前幫忙的人。這是我第一次使用這個網站，如果我忘記了一些重要的信息，我很抱歉。

來源

2014-06-10 Ruzzio

img.gallery具有較高的特異性比.enlarge（0011對0010），因此它會被認爲更重要。

嘗試刪除img標籤名稱。 CSS選擇器應該儘可能簡單。

來源

2014-06-10 22:24:27

我做了，它仍然無法正常工作。這太令人沮喪了，我敢肯定，這很簡單，我忽略了或不知道大聲笑。 – Ruzzio

其實它正在工作。我不得不刪除img並利用delroh的答案。謝謝！ :) – Ruzzio

爲什麼不嘗試下，如果你不確定在CSS設置正確的寬度：

.enlarge { 
     width: auto; 
     border: 1px solid red; 
    }

，你會看到，如果切換正常工作;-)

來源

2014-06-10 22:24:19

錯誤。 –

我很欣賞這種迴應。我已經得到它的工作，感謝尼采和delroh！ – Ruzzio

因爲auto不會使其規模增長。簡單地說，auto值會自動計算並設置元素的大小，而不是將其擴展到容器。 Asuming您的圖像是一個容器內，嘗試：

img.gallery { 
     border: 1px solid #aaaaaa; 
     width: 260px; 
     height: 260px; 
    } 

    .gallery.enlarge { 
     width: 100%; 
     height: auto; 
    }

看到它在這裏的行動：http://jsfiddle.net/gfW3g/1/

編輯：添加例如固定CSS的特異性

來源

2014-06-10 22:27:36 delroh

這是工作。我不得不使用你的答案和尼婭的哈哈。謝謝！ – Ruzzio

我添加了一個工作示例，併爲css特性添加了畫廊類。正如尼采所說，沒有必要擁有img.gallery，並且它會將該類的使用限制在img元素中。我很高興我能幫助你。 – delroh

爲什麼我的jQuery toggleClass不工作？

回答

相關問題