jQuery if 语句将 div 类更改为另一个非类答案

【问题标题】：jQuery if statement change div class to another not classjQuery if 语句将 div 类更改为另一个非类
【发布时间】：2013-09-04 11:23:41
【问题描述】：

是否可以使用 if 语句将一个 div 的类（例如#carriage-promo）更改为另一个，例如#carriage-promo-2？

考虑：

if(! navigator.userAgent.match(/Android/i) &&
 ! navigator.userAgent.match(/webOS/i) &&
 ! navigator.userAgent.match(/iPhone/i) &&
 ! navigator.userAgent.match(/iPod/i) &&
 ! navigator.userAgent.match(/iPad/i) &&
 ! navigator.userAgent.match(/Blackberry/i) )
    {
        $('#carriage-promo').css({'position':'fixed','bottom':'0px','width':'100%'});
    } else {
        $('#carriage-promo').css({'display':'inline-block', 'height':'40px'});
        alert('tablet detected');
        //change #carriage-promo to #carriage-promo-2
    }

如果用户从上述设备之一浏览，我想将整个类从一个属性更改为另一个，而不是只更改该类的一个属性。

【问题讨论】：

$('#id') 是ID选择器，类选择器是$(".class") (api.jquery.com/id-selector)
啊，当然谢谢！ :p

标签： jquery class html if-statement

【解决方案1】：

不太确定是否要更改 ID 或 Class 属性。如果是类，则只需将 id 替换为类即可。

$('#carriage-promo').attr('id', 'carriage-promo-2');

或者，如果是你想改变的类，你可以这样做

$('#carriage-promo').addClass('class_name');

【讨论】：

类，而不是 ID - 我的错误。谢谢，我没有尝试使用 .attr，但我认为这会更改与所选内容相关的属性？
是的，确实如此。使用 jQuery 的 attr，您不仅可以更改 ID 和类，还可以更改 href（如果是锚标记）、src（如果是 img）等等，具体取决于它是什么类型的元素。更多信息：api.jquery.com/attr

【解决方案2】：

你可以使用addClass()添加css类，removeClass()删除css类

  if(! navigator.userAgent.match(/Android/i) && ! navigator.userAgent.match(/webOS/i) &&
     ! navigator.userAgent.match(/iPhone/i) && ! navigator.userAgent.match(/iPod/i) &&
     ! navigator.userAgent.match(/iPad/i) &&! navigator.userAgent.match(/Blackberry/i) )
    {
        $('#carriage-promo').addClass("addclass1");
    } else {
        $('#carriage-promo').addClass("addclass2");
        alert('tablet detected');
        //change #carriage-promo to #carriage-promo-2
    }

Css 类：

.addClass1{
       position:'fixed';
       bottom:'0px';
       width:'100%';
}
.addClass2{
      display:'inline-block'; 
      height:'40px';
}

【讨论】：

谢谢！非常有用的东西。

【解决方案3】：

如果你使用 jquery，试试这个：

$('#carriage-promo-2').addClass('addThisClass');

【讨论】：

当然！！ addClass 和 removeClass，完全忘记了这些。非常感激！ :)