标签: removeclass

我有一个带有以下样式的段落:

.design_info_box p.design_info_desc
{
    height:30px;
    text-overflow: ellipsis;
    overflow:hidden;
}

通过这个,您可以看到前两行文本,其中包含一个"阅读更多"的按钮,该按钮扩展了段落以显示文本的其余部分.

这是按钮的代码:

$(".read-more div").click(function(){
    $(this).parent().parent().children("p").removeClass("design_info_desc", "slow");
    $(this).hide();
});

这确实删除了类,并显示了整个段落.但是,它没有动画.根据文档,removeClass应该具有动画的持续时间.我也试过用10000这样的数字代替"慢".

它有没有动画的原因？

我一直在寻找有关如何在链接中添加和删除类的教程,但遗憾的是没有任何成功.所有早期的问题都给了我一些理解,但没有给我我想要完成的结果.

我试图通过在单击链接时添加和删除类来为我的导航设置活动状态.

以下是我对JavaScript的看法:

$(document).ready(function(){

    //active state  
    $(function() {
        $('li a').click(function(e) {
            e.preventDefault();
            var $this = $(this);
            $this.closest('li').children('a').removeClass('active');
            $this.parent().addClass('active');

        });
    });
});

这是我的导航:

<div id="nav">
    <div id="main-nav" class="center">
        <ul>
            <li><a href="/photography.php">Photography</a></li>
            <li><a href="/web.php">Web</a></li>
            <li><a href="/print.php">Print</a></li>

            <li class="nav-R"><a href="/about.php">About</a></li>
            <li class="nav-R"><a href="/contact.php">Contact</a></li>
        </ul>
    </div><!-- close center -->
</div><!-- close-nav -->

我发现自己正在做的一个常见操作如下:

<ul>
    <li>One</li>
    <li class="current">Two</li>
    <li>Three</li>
</ul>

var $allLi = $('li');

$allLi.click(function(){
    $allLi.removeClass('current');
    $(this).addClass('current');
});

有没有办法压缩这个,通过组合$ allLi和$(this)并使用toggleClass？

谢谢!

我想每隔3秒更改一次班级名称.不行不通.我怎样才能做到这一点？

$(document).ready(function() {
        function moveClass(){
            var x = $('.liveEvents');
            x.removeClass('liveEvents');
            x.addClass('liveEventsActive');
            x.removeClass('liveEventsActive');
            x.addClass('liveEvents');
       }

        setInterval(moveClass, 3000); 
        return false;
    });

我有一个div,当我点击它时,jquery添加了一个启动动画运行的类.当动画停止时(3秒后)我希望删除该类,这样当再次单击div时,动画将重新开始.

这只是测试,目前只有Chrome浏览器.

这是我的CSS3:

.spin360
{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes spin 
{
    0% { -webkit-transform: rotateX(0); }
    100%   { -webkit-transform: rotateX(-360deg); }
}

这是我的脚本:

<script type="text/javascript">
    $(document).ready(function () {
        $('#spinButton').click(function () {
            $('#shape').addClass('spin360');
        });
    });
</script>

这是我尝试过的:

<script type="text/javascript">
    $(document).ready(function () {
        $('#spinButton').click(function () {
            $('#shape').addClass('spin360').on('webkitAnimationEnd', function () {
                $('#shape').removeClass('spin360');
            });
        });
    });
</script>

和

<script type="text/javascript">
    $(document).ready(function () {
        $('#spinButton').click(function () {
            $('#shape').addClass('spin360');
        });

        $('#spinButton').addEventListener('webkitAnimationEnd', function (e) {
            $('#shape').removeClass('spin360');
        });
    });
</script> …

我.click(function()只是在第一次点击时尝试执行,但它总是在点击时执行.

当点击它的作品.more-post-button将添加类loading来.main ul并show-more-post以.main li该删除后级loading上的setTimeout功能7秒.

JS:

$(".more-post-button").click(function () {

  $('.main ul').addClass('loading');
  $('.main li').addClass('show-more-post');
  setTimeout(function(){
    $('.main ul').removeClass('loading');
  },7000);

});

我的问题是如何只在第一次点击时这样做,而不是每次点击.
提前致谢.

我有两个班级空着色.一旦我点击了彩色类,然后删除彩色类并添加空类.我再次点击它应该添加彩色类和remoce空类.但它没有用.

            var color_click = false;
            var select_color = "";
            $( ".colored").on('click',function(e){
                if(color_click != true){
                    color_click = true;
                    select_color = $(this).css('background-color');
                    $(this).removeClass("colored");
                    $(this).addClass( "empty");
                    $(this).css('background-color','')
                }
            });


            $( ".empty").click(function(){
                if(color_click == true){
                    color_click = false;
                    $(this).css('background-color',select_color);
                    $(this).addClass("colored");
                    $(this).removeClass( "empty");

                }
            });

在过去的三天里，我一直在寻找解决我的问题的方法。我见过很多人和我有同样问题的人，但没有一种解决方案可以解决我的问题。所以我又回到了起点，我请求你们友好的人们的帮助！

我现在正在运行以下脚本，该脚本非常适合我：

$(".show_commentsandnotes_container").click(function () {
    $('.commentsandnotes_bg').addClass('show');
    $('.commentsandnotes_container').addClass('show');
});
$(".commentsandnotes_bg").click(function () {
    $('.commentsandnotes_bg').removeClass('show');
    $('.commentsandnotes_container').removeClass('show');
});

我唯一无法开始工作的是元素的淡入和淡出。我尝试了很多解决方案，例如切换和显示/隐藏，但这最适合我。我需要的唯一简单的事情是将淡入淡出添加到脚本中（1000 毫秒），我只是无法解决这个问题。

有人能帮我吗？提前致谢。

我正在尝试根据匹配的列表项是否具有活动类来切换是否显示选项卡。我已经用 if 语句和 .hasClass 尝试了多种不同的方法，但无法让它按照我的意愿行事！任何帮助将不胜感激。

这是我的尝试之一的示例：

$( "#indexHero" ).onClick(function(){
  $("#tabNo1.active"){
    $( "#testID1, #testID2" ).addClass( "hideMe" );
    $( "#testID3" ).removeClass( "hideMe" );
  }
});

我想禁用 dataTable API 中的排序属性。我使用 bsort:false 禁用所有列的排序。

这很好用，但第一列仍然显示排序图标。为什么 ？

$("#reportgrid").DataTable({
    "order": [],"bSort" : false,
    "iDisplayLength": 10,
    "sDom": '<"top">rt<"bottom"lp><"clear">',
});

我将此代码用于数据表。

这是我的网格的快照。其中第一列具有 sorting_asc 的 css，但我已经禁用排序。

那么，如何从第一列中删除排序图标？