Как удалить класс и добавить другой класс jquery

Question

Как удалить класс и добавить другой класс jquery

0

Я хочу удалить существующий класс моего элемента каждый раз, когда я нажимаю изображение.

Это мой 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").

user3381623 02 апр. 2014, в 06:24

Источник

1

Вы должны прочитать о том, как работает выбор DOM и привязка событий. Вы связываете обработчик click с элементами, которые имеют этот класс, в то время, когда .click() метод .click() . Он не обновляется автоматически при обновлении классов.
cookie monster 02 апр. 2014, в 03:52
0

Это хорошее начало для изучения. Jquery.com
Felix Kling 02 апр. 2014, в 04:23
0

У вас все еще есть эта проблема? Я использую removeClass с jQM 1.4.3 и removeClass не работает каждый раз ...
Kallewallex 23 июль 2014, в 12:42

Показать ещё 1 комментарий

Теги:

javascript

jquery

4 ответа

0

Пожалуйста, ознакомьтесь с приведенным ниже кодом.

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/

Renjith 02 апр. 2014, в 03:40

0

Попробуй это

    $('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");
    }

});

ДЕМО ЗДЕСЬ

Kiranramchandran 02 апр. 2014, в 02:48

0

попробуй это

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

Надеюсь это поможет.

Aameer 02 апр. 2014, в 02:15

0

Это не удалит класс technologyImage !!!
Kiranramchandran 02 апр. 2014, в 04:54

Ещё вопросы

Вы должны прочитать о том, как работает выбор DOM и привязка событий. Вы связываете обработчик click с элементами, которые имеют этот класс, в то время, когда .click() метод .click() . Он не обновляется автоматически при обновлении классов.
Это хорошее начало для изучения. Jquery.com
У вас все еще есть эта проблема? Я использую removeClass с jQM 1.4.3 и removeClass не работает каждый раз ...

Robert Munn · Accepted Answer · 2014-04-02T03-45-00.000Z

Убедитесь, что вы также сбросили непрозрачность на выбранных изображениях.

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