为什么我的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不工作？

回答

相关问题