标签: toggleclass

我想要切换3张图像.我把它们中的每一个放在一个类中并在css中更改它的图像.我现在可以在两个类之间切换,但是当我添加第三个类时,代码不起作用.它们中的任何一类都可以作为起始类.

    $('.one').click(function(){                             
        $(this).toggleClass("two");
        $(this).toggleClass("one");

    });
     $('.two').click(function(){                             
        $(this).toggleClass("one");
        $(this).toggleClass("two");

    });

当我添加这一行时:

        $(this).toggleClass("three"); 

它根本没有切换....

你知道一种方法,我可以将它们全部放在一个函数中吗？

谢谢.

我有一个问题toggleclass for just children元素.

<ul class="sample-menu">
<li id="sample-topmenu_2">
    <a href="#" class="sample-icon">Menu Text</a>
    <ul class="sample-submenu">
        <li class="submenu"><a href="#" class="sample-icon">Submenu Text</a></li>
        <li class="submenu"><a href="#" class="sample-icon">Submenu Text</a></li>
    </ul>
</li>
<li id="sample-topmenu_3">
    <a href="#" class="sample-icon">Menu Text2</a>
    <ul class="sample-submenu">
        <li class="submenu"><a href="#" class="sample-icon">Submenu Text2</a></li>
        <li class="submenu"><a href="#" class="sample-icon">Submenu Text2</a></li>
    </ul>
</li>

我使用这个jquery切换,但它切换所有菜单的所有li元素.

$( "*[id^=bga-topmenu_] p" ).click(function() {
  $("li.submenu").toggleClass( "sumenu_show" );
});

我感谢您的帮助.

我有两个链接,并希望在点击任何链接时切换其类.

我的链接是

<a id="single" class="btn" >
<a id="double" class="btn active">

所以我想改变类btn to btn active 我有这个代码

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).removeClass('focus active');
       $(this).removeClass('active');
       $(this).toggleClass("btn active");
   });
});

我尝试使用此代码,因为在我的accpliceation中的其他一些javascript也添加了这些类.

这个工作很好,当它像吼叫

<a id="single" class="btn" >
<a id="double" class="btn active">

但是,当我的第一个按钮处于活动状态时,如下

<a id="single" class="btn active" >
<a id="double" class="btn">

这不起作用,但点击双倍时给出如下的课程

<a id="single" class="btn active" >
<a id="double" class="active">

这很奇怪,因为它在<a id="double"活动时工作但在<a id="single"活动时不起作用.

我想要做的就是点击任何链接,1.删除旧链接中的所有类,并给旧链接类"btn"2.从点击链接中删除所有类,并给"btn active"类

怎么解决这个问题？

可以说我有这样的清单......

<ul>
  <li class="one">One</li>
  <li class="two">Two</li>
  <li class="three">Three</li>
</ul>

......我希望能够在李的家里切换班级......

$( "li" ).click(function() {
    $( "li" ).toggleClass( "active" );
});

..所以我想要li除了被点击的那个从未显示为'.active',同时仍然保持'.active'li中的toggleClass能力

所以我想也许我想从任何其他li中删除Class,除了点击的那个.我不知道我怎么能做到这一点......

关于如何实现这样的事情的任何想法？我相信它很容易,但我不知道因为我对jQuery很新

解决了 - 如果有人想看到它......我们去: http ://jsfiddle.net/6jm2s/17/ 也是这个... http://jsfiddle.net/6jm2s/18/

两个答案都很完美.. @jondavidjohn和@hunter谢谢你们......太糟糕了我不能把Checkmark放在两个答案上......但我会让猎人拥有它,因为他的代码更短...... :)

必须有一种方法可以在一个toggleClass()中执行这些操作:

$('div').on("mouseenter", ".myButton", function(){
        $(this).addClass('rollOver');
    });
$('div').on("mouseleave", ".myButton", function(){
        $(this).removeClass('rollOver');
    }); 

...但它在on()中,因为myButton是动态创建的.

我的加价:

<ul id="playerControls">
    <li class="play-bt"></li>
</ul>

如果按下播放按钮,我会触发此事件:

$(".play-bt").bind('click',function(){
    $(this).toggleClass('pause-bt');
});

现在我假设play-bt类名已被更改为pause-bt,但是为什么这个事件:

$(".pause-bt").bind('click',function(){
    console.log('PEW');
});

是不是被解雇了？

我需要在iphone菜单中模拟悬停或mouseup/down,我给出了两个例子.

<ul id="main_nav">
    <li><a href="http://google.com">google</a></li>
    <li><a href="http://yahoo.com">yahoo</a></li>
    <li><a href="#">Three</a>
      <ul>
        <li><a href="#">sub One</a></li>
        <li><a href="#">sub Two</a></li>
      </ul>
</li>
<li><a href="#">Four</a></li>
</ul>

//bind the touchstart event to the link element
$('li').live('touchstart touchend', function(e){
    $(this).toggleClass('btn-sign-up-hover');
    //alert('alert');
});

a {
    display:block;
    line-height:30px;

}

li{
    background:#096;
}

.btn-sign-up-hover {
    background: #F3F;
}

这在iphone中不起作用,

但以下是工作

//bind the touchstart event to the link element
$('li').live('touchstart', function(e){
    $(this).css('background','red');
    //alert('alert');
});

$('li').live('touchend', function(e){
    $('li').css('background','#096');
    //alert('alert');
});

问题是我需要使用toggleClass.

小提琴示例http://jsfiddle.net/UcyAb/

当我点击输入时,我需要在输入包装器中添加一个类,并在单击其他输入时删除该类.

我已经开始使用toggleClass但它只会在再次单击相同的输入时删除该类.

我已经尝试使用函数:find()和nearest()但是无法确切地确定我需要哪一个,或者以什么顺序调用它们...任何帮助都将受到赞赏.

到目前为止这里是代码:

<div class="wrapper">
    <label for="name" class="required">
        name
    </label>
    <div class="data_area">
        <input type="text" id="" name="" value="" title="" class="" />
    </div>
</div>

<div class="wrapper">
    <label for="other name" class="required">
        last name
    </label>
    <div class="data_area">
        <input type="text" id="" name="" value="" title="" class="" />
    </div>
</div>


<script>
    $('.wrapper input').click(function () {
        $(this).parent().addClass('red');
    });
</script>

<style>
.red {background:red;}
</style>

我试图将active slide我slick carousel的ken wheeler中的目标添加到幻灯片中的p元素中.

因此,当slide激活时,p元素将反弹(或某种东西),然后当幻灯片转换到下一张幻灯片时,动画将应用于新的p元素.幻灯片循环后,动画类将继续应用于slick carousel.

HTML:

<div class="slick-promo">
    <div class="single-slide">[img code here]<p>This text will come in animated, then as the slide leaves it will have the animation class removed.</p></div>
    <div class="single-slide">[img code here]<p>Lorem ipsum blah blah</p></div>
    <div class="single-slide">[img code here]<p>lorem ipsum blah blah</p></div>
</div>

这images几个classes是由我使用的其他程序动态生成的.

使用Javascript:

jQuery(document).ready(function($){
    $('.slick-promo').slick({
      infinite: true,
      fade: true,
      cssEase: 'linear',
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
      //this is where …

我创建了这个小小的jQuery Snippet来切换一个区间中元素的类:

setInterval(function(){$('.grid-item .slide-image').toggleClass('active')}, 800);

脚本工作正常!现在我.slide-image在包装器中使用了基类的多个元素.grid-item.

<div class="grid-item">
  <div class="slide-image"><img src="http://www.placehold.it/500x500/233953"></div>
  <div class="slide-image"><img src="http://www.placehold.it/500x500/03144b"></div>
  <div class="slide-image"><img src="http://www.placehold.it/500x500/030a4b"></div>
</div>

有没有办法重写片段,以便第二个.slide-image获得.active第一个之后的类？然后第三个元素依此类推......

问题: - .slide-image元素的数量没有定义.在某些情况下,有两个,另一个有四个元素.

看看我的CodePen!