Question

我创建了html页面，其中有翻转png和我想要做的事情是当我点击（制作翻转）所有png它必须是灰度（我做了这部分）然后如果我点击任何png其他png必须是默认的

如果你查看演示链接，你就会理解。

and the link that I want to do (rating section)

我的代码

＆＃13;

$(document).ready(function(){
    $(".form-elements input[type='button']").on("click", function(e) {
          var el = $(this).attr("name");
          switch(el){
              case 'd1': $(this).toggleClass('d1_pasif'); break;
              case 'd2': $(this).toggleClass('d2_pasif'); break;
              case 'd3': $(this).toggleClass('d3_pasif'); break;
              case 'd4': $(this).toggleClass('d4_pasif'); break;
              case 'd5': $(this).toggleClass('d5_pasif'); break;
          }
    });
});

＆＃13;

.d-groups input[type="button"]{
  cursor:pointer;  
  border: 0;
  display: inline-block;
  height: 32px;
  width: 32px;    padding: 0;
    margin: 0;
}
.d1 {

  background: url(https://anitur.streamprovider.net/images/otel-filtre/d1.png);

}
.d1_pasif {
    background: url(https://anitur.streamprovider.net/images/otel-filtre/d1_pasif.png);
}
.d2 {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d2.png);
}
.d2_pasif { 
background: url(https://anitur.streamprovider.net/images/otel-filtre/d2_pasif.png);
}
.d3 {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d3.png);
}
.d3_pasif {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d3_pasif.png);
}
.d4 {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d4.png);
}
.d4_pasif {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d4_pasif.png);
}
.d5 {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d5.png);
}
.d5_pasif {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d5_pasif.png);
}

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript" src="//anitur.streamprovider.net/js/jquery-1.8.2.min.js?v=1.2" ></script>
        <div class="form-elements d-groups" style="padding:4px 0;padding-left:5px;margin:0 auto;display:block;">
            <input type="button" name="d5" class="d5"  />
            <input type="button" name="d4" class="d4" />
            <input type="button" name="d3" class="d3"  />
            <input type="button" name="d2" class="d2" />
            <input type="button" name="d1" class="d1" />

        </div>
    </body>
</html>

＆＃13;

Answer 1

$(document).ready(function(){

  $(".form-elements input[type='button']").on("click", function(e) {
      var el = $(this).attr("name");
      $(".form-elements input[type='button']").removeClass(); // Add this
      switch(el){
          case 'd1': $(this).toggleClass('d1_pasif'); break;
          case 'd2': $(this).toggleClass('d2_pasif'); break;
          case 'd3': $(this).toggleClass('d3_pasif'); break;
          case 'd4': $(this).toggleClass('d4_pasif'); break;
          case 'd5': $(this).toggleClass('d5_pasif'); break;
      }
});

});

试试这个！

上述代码的更紧凑版本。

 $(document).ready(function(){

      $(".form-elements input[type='button']").on("click", function(e) {
          var el = $(this).attr("name");
          $(".form-elements input[type='button']").removeClass(); // Add this
          $(this).addClass(el+"_pasif");
    });

    });

两者都可以肯定。

Answer 2

我完全复制了它here

我基本上是这样做的，所以他们都使用相同的.enabledclass来简化代码。然后我还检查它们是否都被勾选，如果是这样，当另一个被勾选时（例如网站），它们都会切换它们

$(document).ready(function() {
  $(".form-elements input[type='button']").toggleClass('enabled');

  $(".form-elements input[type='button']").on("click", function(e) {
    if ($(this).parent().children(':not(.enabled)').length == 0) {
      $(".form-elements input[type='button']").toggleClass('enabled');
    }

    $(this).toggleClass('enabled');
  });
});

Answer 3

如果点击的元素具有如下所示的*_pasif类，则从所有其他元素中删除*_pasif类。

$(".form-elements input[type='button']").on("click", function (e) {
    var el = $(this).attr("name");

    if (!$(this).hasClass(el + '_pasif')) {
        $(".form-elements input[type='button']").not(this).each(function () {
            $(this).removeClass($(this).attr("name") + '_pasif');
        })
    }

    $(this).toggleClass(el + '_pasif');
});

<强>更新

var buttons = $(".form-elements input[type='button']");
buttons.on("click", function (e) {
    var el = $(this).attr("name");

    var length = buttons.length,
        count = 0;
    buttons.each(function () {
        if ($(this).hasClass(this.name + '_pasif'))
            count++;
    });

    if (length == count) {
        buttons.not(this).each(function () {
            $(this).removeClass(this.name + '_pasif')
        });
    } else {
        $(this).toggleClass(el + '_pasif');
    }
});

CODE PEN

Answer 4

试试这个：

$(document).ready(function(){

  $(".form-elements input[type='button']").on("click", function(e) {
      var el = $(this).attr("name");

      if (!$('.pasif').length)
      {
        $('.d1').toggleClass('d1_pasif');
        $('.d2').toggleClass('d2_pasif');
        $('.d3').toggleClass('d3_pasif');
        $('.d4').toggleClass('d4_pasif');
        $('.d5').toggleClass('d5_pasif');
      }        
      $(this).toggleClass('pasif'); 
      switch(el){
          case 'd1': $(this).toggleClass('d1_pasif'); break;
          case 'd2': $(this).toggleClass('d2_pasif'); break;
          case 'd3': $(this).toggleClass('d3_pasif'); break;
          case 'd4': $(this).toggleClass('d4_pasif'); break;
          case 'd5': $(this).toggleClass('d5_pasif'); break;
      }
});

});

然而，这段代码有点乱，因为那里你需要很多不必要的类。 2个课程应该足以达到你的目标。

如何删除除一个以外的所有切换？

4 个答案:

CODE PEN