Question

我已尝试在此网站上搜索其他问题，但我还没有找到与我遇到同样问题的问题：

每次点击图像时，我都会尝试为图像添加ID，因此我可以对图像应用某种样式。这是我用来尝试完成此任务的代码：

    <div class="imgThumbnail">

        <img src="" />
        <img src="" />

    </div>

    <script type="text/javascript">

        $(document).ready(function(){

            //hover over thumbnail effect
           $('.imgThumbnail img').hover(
               function() {
                $(this).css({"height":"18vh","width":"18vh"})},

               function() {
                $(this).css({"height":"17vh","width":"17vh"});    
           }); 

            //selected effect
           $('.imgThumbnail img').click(function(){
              (this).attr("id","selected");
           });

        });

尽管我在拍摄方面遇到了麻烦，但我还没有在我的代码中找到问题。我已将点击功能中的.attr（）更改为.clear（）以测试我是否定位了正确的图像，以及是否正在注册点击。这清除了我点击的图像，如预期的那样。然后我将$（this）.attr（“id”，“selected”）放到我的悬停功能中，它按照预期添加了我的“选定”ID的样式。

那么当我使用点击功能时，为什么id不能正确添加到图像中？

我是jQuery的新手。我还是新手来浏览这个网站，所以如果你能找到其他答案，我会很感激重定向。谢谢！

Answer 1

您的代码已完成99％。您最后在 this 之前忘记了 $ 。

这就是你的javascript应该是这样的：

    $(document).ready(function(){

        //hover over thumbnail effect
       $('.imgThumbnail img').hover(
           function() {
            $(this).css({"height":"18vh","width":"18vh"})},

           function() {
            $(this).css({"height":"17vh","width":"17vh"});    
       }); 

        //selected effect
       $('.imgThumbnail img').click(function(){
          $(this).attr("id","selected");
       });

    });

Answer 2

要在单击时切换类，请创建.click（）函数，然后使用toggleClass 每次单击选定的类时，这将切换类。使用不属于这类东西的课程

$('.imgThumbnail img').click(function(){
    $(this).toggleClass('yourClass');
});

这里是Fiddle

为图像添加ID

2 个答案: