Question

toggle中IDs的{{1}}样式是否有任何方法，与jQuery函数的行为方式相同，但toggleClass();而非IDs classes 1}}。

这就是我尝试切换classes并且它运行正常。 IDs

的任何解决方案

$(document).ready(function(){
   $("button").click(function(e){
      e.preventDefault();
      $(".header-container").toggleClass("closed");
   });
}):

我知道在这种情况下我应该使用classes但是为了灵活性，在某些情况下我们有IDs。任何建议

Answer 1

使用jquery，您可以使用.attr()编辑attrubite：

获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

＆＃13;

$(document).ready(function(){
   $("button").click(function(e){
      e.preventDefault();
      $(".header-container").toggleClass("closed");
      if($(".header-container").attr('id')=='opened'){
      $(".header-container").attr('id','closed');
      }else{
       $(".header-container").attr('id','opened');
      }
      var elid = $(".header-container").attr('id');
      $(".header-container").html("i got an id now :"+elid);
   });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-container">My id is empty</div>
<button>Edite Id</button>

＆＃13;

Answer 2

因为没有在jquery中切换类的函数。你定义一个创建一个新插件以在两个函数之间切换

$(document).ready(function(){
    jQuery.fn.idToggle = function(a,b) {
        function cb(){ [b,a][this._tog^=1].call(this); }
        return this.on("click", cb);
     };
        
     $('button').idToggle(
         function(){
           $('.header-container').attr('id','closed');
          },
         function(){
           $('.header-container').attr('id','open');
      });
});

.header-container { padding : 40px;}
#open{ background:#f08;}
#closed { background:#000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-container" id="open">
    <div class="menu"> </div>
</div>
<button> click btn </button>

如何在jQuery中的两个id而不是类之间切换

2 个答案: