标签: toggleclass

如果我有类.A和类.B并想在按钮单击之间切换,那么在jQuery中有什么好的解决方案？我还是不明白是怎么toggleClass()运作的.

是否有内联解决方案将其置于onclick=""事件中？

我正在尝试做一些非常简单的事情.基本上我有一个可点击的div'热点',当你点击它填满屏幕并显示一些内容.我通过简单地改变div的类,删除'spot'并添加'grow'来实现这一点,并且有一些CSS动画来使它成长.这很好用.

问题是,在这个div中有一个close_button,目前只是文本.我希望这可以将类切换回来 - 即删除成长和读取的点.单击时不会执行此操作.我相信这是在DOM加载时没有这些类的元素,但我是jQuery的新手,不知道如何解决这个问题.

我认为这可能是一种更明智的做法,有人能指出我正确的方向吗？我会非常感激的.我尝试使用toggleClass而无济于事.

$( document ).ready(function() {      
    $(".clickable").click(function() {  
        $(this).addClass("grown");  
        $(this).removeClass("spot");
    });   

    $(".close_button").click(function() {  
        alert (this);
        $("#spot1").removeClass("grown");  
        $("#spot1").addClass("spot");
    });   
});

更新:

我现在正在使用此代码,

$( document ).ready(function() {   
    $(document).on("click", ".close_button", function () { 
        alert ("oi");
        $("#spot1").addClass("spot");
        $("#spot1").removeClass("grown");
    });  


    $(document).on("click", ".clickable", function () {
        if ($(this).hasClass("spot")){
            $(this).addClass("grown");
            $(this).removeClass("spot");
        }
    });
});

奇怪的是,close_button函数仍然不会添加'spot'或删除'grow'虽然它会添加任何其他类,它会删除其他类...我添加了if子句,因为我认为这两个函数都可能被触发时间,互相取消,但似乎没有任何区别

我有一个包含li元素的ul列表.当用户单击其中一个li元素时,应该将一个类添加到该元素中.

这很容易设置,但是,当单击其他li元素时,我希望从非活动li中删除"active"类.

我已经提出了问题的一个方面:http: //jsfiddle.net/tGW3D/

任何时候都应该有一个红色的li元素.如果单击第二个然后单击第一个,则只有第一个应为红色.

我正在使用jquery并尝试将一个类添加到表中选择该表行.

我最初使用以下代码 -

$(this).parents("tr").toggleClass("over", this.clicked);            

出于某种原因,仅在已经分配了类的某些情况下,这不起作用.在我对任何故障排除过于疯狂之前,我将其更改为以下内容 -

$(this).parents("tr").addClass("over", this.clicked);           

这个新选项似乎工作正常.

我的问题是上面的一个选项是否比另一个更好.....我应该使用toggleClass而不是addClass,还是addClass足够？

谢谢你的想法.

我试图让每个元素的类自动按顺序一次更改一个.这意味着元素1发光然后随着元素2发光然后熄灭等等而消失.当整个序列重新开始时,每个元素都会闪烁.

$('header div:first').toggleClass('highlight').nextAll().toggleClass('none');

function highlight() {
  var $off = $('header div.highlight').toggleClass('none');

  if ($off.next().length) {
    $off.next().toggleClass('none');
  } else {
    $off.prevAll().last().toggleClass('highlight');
  }
}

$(document).ready(function() {
  setInterval(highlight, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
 <div>element 1</div>
 <div>element 2</div>
 <div>element 3</div>
 <div>element 4</div>
</header>

它不会按预期工作(元素2到4同时突出显示所有内容,然后在元素1完全没有变化时关闭)我不知道为什么.我究竟做错了什么？

基本上我要做的是创建一个网站,其主页上包含所有内容,但任何时候只能看到一些内容.我这样做的方式是通过切换可见性.

我遇到的问题是:假设主页,当你第一次访问网站时是空白的(我希望它的方式).让我们说你点击"关于我们"链接.突然之间,关于我们的部分变得可见(我希望它的方式).现在我遇到的问题是,当我知道让我们说点击"产品"链接时,我希望"产品"内容变得可见,"关于我们"内容再次变得不可见.(基本上创造了在同一页面中打开新页面的错觉)

这是我到目前为止提出的代码.我可以使某些div元素可见和不可见(onclick)但我无法弄清楚如何确保任何时候只能看到一个div元素.

<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
    document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>

<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
    document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>

使javascript工作的链接如下所示:

<href ="#"onclick ="toggleVisibility();">关于

<href ="##"onclick ="toggleVisibility1();">产品

我toggleClass无法获得工作的缓动属性.我在这个网站和其他网站上搜索过,但仍无法按预期工作.班级正在切换正常,但它不会顺利进出.

这是我的代码示例:DEMO

以下是我在项目中加载的(全部)脚本:

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

我有一个偷偷摸摸的怀疑它与我正在加载的脚本(或者可能没有加载？)有关,因为我已多次查看代码并将其直接与jQuery文档进行比较.我也是jQuery的新手.

我想要完成的是类似于翻盖效果的东西.在页面加载时,<div>根据从数据库中获取的值显示或隐藏,复选框用于切换<div>打开或关闭.

非常简单地说:线路currentItem.toggleClass('open');似乎不起作用.

更准确地说,当用萤火虫检查结果时,我可以看到相关元素上的"开放"类闪烁(出现并立即消失).所以就像这个函数实际上被触发了两次(当然我只点击一次).

有人可以解释一下为什么会这样以及如何预防吗？

这是我的jQuery代码:

$('div.collapse ul.radio_list li input[type=radio]').click(function (event) {

    var currentTree = $(this).parent().parent().parent();
    var currentItem = $(this).parent().parent();
    var currentGroup = currentItem.attr('rel');

    $(this).parents('ul').children('li').removeClass('select');
    if ($(this).is(':checked')) {
        currentItem.addClass('select');
    }

    currentItem.toggleClass('open');

    var currentLevel = 0;
    if (currentItem.is('.level1')) {currentLevel = 1;}
    if (currentItem.is('.level2')) {currentLevel = 2;}
    if (currentItem.is('.level3')) {currentLevel = 3;}
    var nextLevel = currentLevel + 1;

    currentTree.children('li').filter('li[rel ^=' + currentGroup + '].level' + nextLevel).animate({'height': 'show', 'opacity': 'show'}, 250).addClass('currentChild');
});

这是我的HTML代码的一部分,为了更好的可读性而略微简化(我知道不是很漂亮,但我对HTML输出的控制有限):

<div class="col_left collapse">
    <ul class="radio_list" rel="7">
        <li class="onglet level0" rel="group1"> …

当你通过添加类来点击<div>另一个时,这个脚本就是这样做的.一旦有了这个类,点击任意位置(除了将删除该类,因此隐藏它.所以你点击查看一个弹出div,然后点击任何地方,但该div应该隐藏它.<div>log_in_box_dd#big_ul_hide#big_ul_hide#big_ul_hide

这一切都有效,但只有一次.之后,它变得非常奇怪.
添加然后删除后,检查元素将会读取<div id="big_ul_hide" class="">.我不能让课程重新添加.

我添加了该setTimeout函数,因此在.lin_und单击时不会立即删除该类.

那么,为什么不让我重新加入课程呢？如果我alert(...)之后.toggleclass它会每次都提醒,但仍然不适用于该课程.

小提琴:http://jsfiddle.net/NQxAC/

<script>
$('.lin_und').click(function() {
    $('#big_ul_hide').toggleClass('log_in_box_dd');
});
setTimeout(function() {      
    $('html').click(function() {
        if($('#big_ul_hide').hasClass('log_in_box_dd')) {
            $('#big_ul_hide').removeClass('log_in_box_dd');
        }
    });
    $('#big_ul_hide').click(function(event) {
        event.stopPropagation();
    });
}, 2000);
</script>

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

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

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

    });

当我添加这一行时:

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

它根本没有切换....

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

谢谢.