javascript - 如何删除类并添加另一个类jquery

标签 javascript jquery

我想在每次单击图像时删除元素的现有类。

这是我的 HTML:

  <img id="Iphone" src="Image/Technology/Iphone.png" class="technologyImage"/>
  <img id="Android" src="Image/Technology/Android.png" class="technologyImage"/>

这是我的 JavaScript:

 $(".technologyImage").click(function () {
    $(this).removeClass();
    $(this).addClass("technologySelected");
    $(".technologyImage").css("opacity", "0.4");
    $(".technologyImage").css("filter", "alpha(opacity=40)");
});


$(".technologySelected").click(function () {
    alert("IMAGE IS ALREADY SELECTED");
});

如果用户单击所选图像,我想提醒用户。该代码不起作用,每次我单击图像时它也会转到 $(".technologyImage")不在$(".technologySelected")上.

最佳答案

确保您也重置了所选图像的不透明度。

<html>
<head>
    <script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript"> 

    $( document ).ready( function() {
        $(".technologyImage").click( function(){
            if($(this).hasClass( "technologySelected")){
                alert("IMAGE IS ALREADY SELECTED");
            }else{
                $(".technologySelected")
                    .removeClass("technologySelected");                
                $(".technologyImage")
                    .css("opacity", "0.4")
                    .css("filter", "alpha(opacity=40)");
               $(this)
                    .addClass("technologySelected")
                    .css("opacity", "1.0")
                    .css("filter", "alpha(opacity=100)");
            }
        });
    });
</script>

</head>
<body>

  <img id="Iphone" src="ios.jpg" class="technologyImage"/>
  <img id="Android" src="android.jpg" class="technologyImage"/>


</body>
</html>

关于javascript - 如何删除类并添加另一个类jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22801194/

相关文章:

javascript - 将 Handlebars 与 D3.js 结合使用

javascript - Bootstrap Twitter 输入类型文件如何清除该文件?

jquery 遍历 asp.net 菜单

javascript - 如何在没有钩子(Hook)的情况下动态添加图像或链接?

javascript - 限制滚动到目标 id

javascript - 访问未命名对象的属性(对象内)

javascript - 为什么我收到 with 语句的语法错误,但我实际上并没有使用任何语句?

javascript - Open.window() Document.referrer 从 HTTPS 站点到 HTTP 站点为空

javascript - html5 游戏与 Canvas ,在 firefox 上的性能问题 (4)

javascript - 通过更改下拉列表更改输入字段