Question

我有一堆图像，我想在点击时添加/删除边框和框阴影。我觉得这很简单，但似乎我在这里忽略了一些东西。

HTML：

<img class='unselected' src='/images/dot.en.hc.png' alt='dot' title='dot' />

jquery的：

$('img').click(function() {
    if ($(this).hasClass("selected")) {
        $(this).removeClass('selected').addClass('unselected');
    } else {
        $(this).removeClass('unselected').addClass('selected');
    }
});

的CSS：

.selected {
    border: 2px solid #0F0;
    box-shadow: 0px 0px 3px 2px #0F0;
    transition: border 0.2s, box-shadow 0.2s;
}
.unselected {
    border: 2px solid #FFF;
    box-shadow: 0px 0px 0px 0px #0F0;
    transition: border 0.2s, box-shadow 0.2s;
}

编辑：由于上面的代码似乎很好，我在这里打印我在网站上的完整代码（我刚刚开始这个小网站来测试一些东西，所以它很空）：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
$('img').click(function() {
    if ($(this).hasClass("selected")) {
        $(this).removeClass('selected').addClass('unselected');
    } else {
        $(this).removeClass('unselected').addClass('selected');
    }
});
</script>
<style>
img {
    max-width: 50px;
}
.selected {
    border: 2px solid #0F0;
    box-shadow: 0px 0px 3px 2px #0F0;
    transition: border 0.2s, opacity 0.2s, filter 0.2s;
    opacity: 1;
    filter: alpha(opacity = 100);
}
.unselected {
    border: 2px solid #FFF;
    box-shadow: 0px 0px 0px 0px #0F0;
    transition: border 0.2s, opacity 0.2s, filter 0.2s;
    opacity: 0.8;
    filter: alpha(opacity = 80);
}
</style>
</head>
<body>

<form method="post" enctype="multipart/form-data" action="link.php">
<input type="hidden" name="log" value="1"/>
<img class='unselected' src='/images/dot.en.hc.png' id='dot.en.hc' alt='dot.en.hc' title='dot.en.hc' />

</form>

</body>
</html>

Answer 1

使用.toggleClass()代替添加和删除课程。

另外，请用$(document).ready

换行

$(document).ready(function () {
    $('img').click(function () {
        $(this).toggleClass('selected unselected');
    });
});

Answer 2

$('img').click(function() {
   if( $(this).hasClass('selected') ) {
        $(this).toggleClass(' unselected selected');
    }
    else{
         $(this).addClass('selected');
    }
});

检查工作＆amp;已更新fiddle

Answer 3

如何检查 DOM 是否准备就绪以及图片是否已加载

http://jsfiddle.net/u4C64/1/

还有下面的代码：

<强>就绪（）： http://api.jquery.com/ready/

// wait until DOM is ready
$(document).ready(function(){

    // wait until all images are loaded
    $(window).on("load", function(){

         $('img').click(function() {
            if ($(this).hasClass("selected")) {
                 $(this).removeClass('selected').addClass('unselected');
            } else {
                 $(this).removeClass('unselected').addClass('selected');
            }    
        });

    }); 

});

单击图像以添加或删除课程

3 个答案: