更改.toggleClass()后更改类的ID

时间:2012-08-27 14:33:38

标签: javascript jquery addclass removeclass toggleclass

jq(".1st").click(
  function() {   
      jq(this).next("div").slideToggle("normal");
      jq(this).toggleClass(this).attr("id","standfeat2");
  }
);

当我点击下拉按钮时,它会关闭一条消息,然后我希望它再次点击时切换回原来的类“standfeat”。我发誓,我已经尝试了一切,我知道它很简单。我在2个css id之间切换..一个有+,一个有 - 。感谢您提前获得所有帮助!

这是我的CSS:

#standfeat {
    color:#185596; 
    font-size:24px; 
    padding-left:40px; 
    background: url(../images/standfeat.png) no-repeat 4px 50%; 
    line-height:24px; 
    cursor:pointer; 
    margin:30px 0px; 
} 

#standfeat2 { 
    color:#185596; 
    font-size:24px; 
    padding-left:40px; 
    background: url(../images/standfeat2.png) no-repeat 4px 50%; 
    line-height:24px; 
    cursor:pointer; 
    margin:30px 0px; 
} ​

3 个答案:

答案 0 :(得分:1)

我认为你的意思是类,而不是ID。 toggleClass不会在两个类之间切换,它会添加或删除一个类,f.ex:

jq(this).toggleClass('open');

首次调用此函数时,它会添加类open。下次删除它等等。您可以在CSS中使用该逻辑来设置不同状态的样式,f.ex:

li{ background: url('plus.png') no-repeat; }
li.open{ background-image: url('minus.png'); }

如果确实想要切换ID,您可以执行以下操作:

this.id = this.id == 'standfeat' ? 'standfeat2' : 'standfeat';

答案 1 :(得分:1)

在点击时修改元素id可能不是一个好主意,为此目的使用类会更加清晰(这就是为什么有toggleClass方法但没有toggleId方法)

将您的CSS修改为:

.standfeat { color:#185596; font-size:24px; padding-left:40px; background: url(../images/standfeat.png) no-repeat 4px 50%; line-height:24px; cursor:pointer; margin:30px 0px; }
.standfeat2 { color:#185596; font-size:24px; padding-left:40px; background: url(../images/standfeat2.png) no-repeat 4px 50%; line-height:24px; cursor:pointer; margin:30px 0px; } 

然后你可以使用以下jsL

jq(".1st").click(
    function() {   
        jq(this).next("div").slideToggle("normal");
        jq(this).toggleClass("standfeat standfeat2");
    }
);

Working demo (not including your images)

答案 2 :(得分:0)

您需要将班级名称传递给toggleClass(),而不是对object的引用。

jq(".1st").click(
  function() {   
      jq(this).next("div").slideToggle("normal");
      jq(this).toggleClass("someClassName").attr("id","standfeat2");
  }
);