Question

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

这是我的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")。

Answer 1

试试这个

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

希望这有帮助。

Answer 2

试试这个

    $('div.technologyImage').click(function(){

    if($(this).hasClass('technologyImage')){
        $(this).addClass('technologySelected');
        $(this).css("opacity", "0.4");
        $(this).css("filter", "alpha(opacity=40)");
        $(this).removeClass('technologyImage');
    }
    else {
       alert("IMAGE IS ALREADY SELECTED");
    }

});

<强> DEMO HERE

Answer 3

请检查以下代码。

JQuery：

$(".technologyImage").click(function () {
   var self= $(this);   
     if(self.hasClass("selected")){
        alert("IMAGE IS ALREADY SELECTED");
     } else {
        if($(".selected").length > 0)
          $(".selected").removeClass("selected");
        self.addClass("selected");
     }
   $(".technologyImage").addClass("opacityHalf");

}）;

Css：

 .technologyImage.opacityHalf {
    opacity:0.4;
    filter:alpha(opacity=40);
  }
  .technologyImage.opacityHalf.selected {
    opacity:1;
    filter:alpha(opacity=100);
  }

http://jsfiddle.net/r9Yj5/

Answer 4

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

<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>

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

4 个答案: