标签: addclass

朋友您好我正在尝试根据浏览器窗口分辨率动态添加类.这是我试图使用的代码,但需要帮助调整它,因为我根本不知道jQuery.

我想要实现的选项是:

一旦访问者访问我的网站,此代码必须检查他的浏览器窗口大小,并按照以下规则将类添加到正文

1. 如果窗口大小超过 1024px 但小于 1280px,则添加类.w1280.

2. 如果窗口大小超过 1280px 但小于 1440px,则添加类.w1440.

3. 如果窗口大小超过 1440px 但小于 1280px,则添加类.w1680.

4. 如果窗口大小超过 1680px,则添加类.wLarge.

为此,我尝试使用以下脚本.我的问题是:

1. 这是正确的代码吗？如果不是什么是正确的代码？

2. 这是最短的代码吗？如果不是正确的代码是什么？

请帮助,因为我对jQuery的了解几乎是零.

function checkWindowSize() {  
    if ( $(window).width() > 1024) { 
        $('body').addClass('w1280');  
        } else {  
        $('body').removeClass('w1280');  
    } 
    if ( $(window).width() > 1280 ) { 
        $('body').addClass('w1440');  
        } else {  
        $('body').removeClass('w1440');  
    } 
    if ( $(window).width() > 1440) { 
        $('body').addClass('w1680');  
        } else {  
        $('body').removeClass('w1680');  
    } 
    if ( $(window).width() …

我正在研究jquery，我希望实现以下效果：首先单击，向下滑动div＃ccc并将链接类更改为“ aaa”；再次单击，将div＃ccc向上滑动并将链接类更改回'bbb'。现在向下滑动滑块可以使用，但是removeClass和addClass无法使用。如何修改使两个效果完美？谢谢。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript">
jQuery(document).ready(function(){              
$("#click").click(function() {
    $("#ccc").slideDown('fast').show();
    $(this).removeClass('bbb').addClass('aaa');
});
$("#click").click(function() {
    $("#ccc").slideDown('fast').hide();
    $(this).removeClass('aaa').addClass('bbb');
});
});
</script>
<style>
#ccc{display:none;}
</style>
<div id="click" class="bbb">click</div>
<div id="ccc">hello world</div>

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

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

以下是我对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？

谢谢!

我有一个带复选框的表,如下所示:

<td class="table-col" >
  <div class="group-one" >
    <input type="checkbox"  />
  </div>
</td>

我想要做的是当选中复选框以将"selected"类应用于"table-col"时.

if ($('.table-col').find(':checked')) {
    $(this).parent().parent().addClass('selected');
}

我看了很多帖子,上面有类似的解决方案,但它似乎对我不起作用.我不知道为什么,但是这是指向不HTMLDocument的元素.

(编辑)在这个页面上会有标记的复选框,我想申请"选中"的复选框.评论@cimmanon提到了事件处理.我需要仔细研究一下.谢谢你的答案!

(编辑)

<td class="table-col">
<div class="group-one">
    <input type="checkbox" checked="checked"/>
</div>
</td>

所以在页面加载之后会有标记的框(我认为它们将始终包含checked ="checked" - 不确定)复选框.这些是需要新风格的.不需要点击它们和应用风格的交互,但是非常酷.

我正在为我的网站开发一个条件,这样当我将页面滚动到一个锚点时,对应于该锚点的菜单项会添加或删除某个类.

我的问题是,我不能让第一个项目菜单删除类,当滚动到第二个锚点,我认为问题可能是在这种情况下,它可能不会像我想的那样工作,所以我需要你的帮助

为此,我使用jquery,这是我到目前为止所得到的:

jQuery(document).ready(function($) {

    var target1 = $("#thehotel").offset().top;
    var target2 = $("#thecity").offset().top;

    var interval = setInterval(function() {

         // i am not sure if this setInterval method is causing the problem, yet i didn't find any other solution

         if ($(window).scrollTop() >= target1 && $(window).scrollTop() < target2) {
              $("#menu .item-109 a").addClass("myClass");
              $("#menu .item-111 a").removeClass("myClass");

         }  
         else if ($(window).scrollTop() >= target2) {
             $("#menu.item-109 a").removeClass("myClass");
             $("#menu .item-111 a").addClass("myClass");
         }  



    }, 250);    
});

如果你发现我的英语不好,我很抱歉,这不是我的母语.谢谢.

我发现了我的错误,这是一个错字!

这里:

           if ($(window).scrollTop() >= target1 && $(window).scrollTop() < target2) …

我有2个按钮,单击一个将交换两个按钮的类.
课程是selected和unselected.

我的CodePen:http://codepen.io/leongaban/pen/iLBvs

例如:单击Login按钮将删除它的未选择的类并为其指定选定的类,并为Register按钮提供未选择的类.

现在的问题是该register_unselected课程不起作用.这些unselected类是我的jQuery 中有单击操作的类.

我应该能够一直点击灰色按钮并将其变为蓝色.但是,在单击第一个灰色按钮(登录)后,新的灰色按钮寄存器不起作用.

使用Chrome的检查器,我可以清楚地看到我的register_unselected类已被添加,但点击功能不起作用.

有任何想法吗？你会怎么做？

// Login Tab (default : first)
$(".login_unselected").click(function(){

  console.log('clicked login');

  // Show Login Tab as selected
  $(this)
    .removeClass('login_unselected')
    .addClass('login_selected');

  // Show Register Tab as unselected
  $(this).parent().find('#tab_register')
    .removeClass('register_selected')
    .addClass('register_unselected');

});

// Register Tab
$(".register_unselected").click(function(){

  console.log('clicked register');

  // Show Login Tab as selected
  $(this)
    .removeClass('register_unselected')
    .addClass('register_selected');

  // Show Register Tab as unselected
  $(this).parent().find('#tab_login')
    .removeClass('login_selected')  
    .addClass('login_unselected');

});

我不明白为什么回调被立即调用,没有任何延迟,我已经阅读了文档,它说它解析css以检索转换持续时间.

但它似乎不起作用,这是我的代码:

这是我的幻灯片指令:

'use strict'

class SlideController
  constructor: ($log, $scope) ->
    console.log 'controller init.'


class Slide
  constructor: ($log,$animate) ->
    link = (scope, element, attrs) =>
      scope.$watch 'slide.animation', (newValue,oldValue)->
        $animate.addClass element,'enter-right',()->
          console.log 'Animation ended!'



    return {
    link
    controller: ['$log', '$scope', SlideController]
    replace: true
    restrict: 'E'
    scope:
      slide: '='
    templateUrl: '/views/directives/postSlide.html'
    transclude: true
    }

angular.module('app').directive 'postSlide', ['$log','$animate', Slide]

这是我的css:

.post-slide.enter-left, .post-slide.leave-left, .post-slide.enter-right, .post-slide.leave-right{
  position:absolute;
  left:0px;
  top:0px;
}

/**
  Enter/leave right
**/
.post-slide.enter-right {
  -webkit-animation:0.5s enter-right;
  animation:0.5s enter-right;
  z-index:100;
  background-color:darkgreen;

}

.post-slide.leave-right { …

我通过下面的代码点击按钮将一个类设置为多个元素:

$('button.but1').on('click', function() {
    $(".div1,.div2,.div3").addClass("focus");
    $(".div1,.div2,.div3").css("z-index", "99");
    $(".div1,.div2,.div3").css("opacity", "1");
});
$('button.but2').on('click', function() {
    $(".div4,.div5,.div6").addClass("focus");
    $(".div4,.div5,.div6").css("z-index", "99");
    $(".div4,.div5,.div6").css("opacity", "1");
});

HTML:

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<button type="button" class="but1" href="#">But1</button>
<button type="button" class="but2" href="#">But2</button>

我遇到的问题是我只希望div所选的"焦点"(类),所有其他div,而不是同一组需要删除"焦点"类.不确定我们要去哪儿？

我正在使用JQuery UI来添加类(),然后使用removeClass().

如果在addClass()完成之前调用removeClass(),它将排队并稍后执行.这不是理想的,我宁愿让removeClass()立即从当前的CSS值执行.

如果我在add/removeClass()之前调用stop(),则在stop()调用时动画似乎永久"冻结",尽管add/removeClass()回调仍然会触发.

只是这里的JS:

var obj = $("#obj");
obj.addClass("obj");

$("#add").click(function(){
    //obj.addClass("adder", 2000, "easeInOutCubic", onAdded);
    obj.stop().addClass("adder", 2000, "easeInOutCubic", onAdded);
});

$("#remove").click(function(){
    //obj.removeClass("adder", 2000, "easeInOutCubic", onRemoved);
    obj.stop().removeClass("adder", 2000, "easeInOutCubic", onRemoved);
});

function onAdded () { console.log("added"); }
function onRemoved () { console.log("removed"); }

其余的都在这里:http://jsfiddle.net/mmstM/42/

这似乎是一个常见的问题,但没有在SO或其他地方找到任何好的信息...请注意这是针对JQuery UI,而不是核心.