用js添加类和属性答案

【问题标题】：Add class and attribute with js用js添加类和属性
【发布时间】：2016-09-05 05:31:55
【问题描述】：

对不起我的英语..

我知道是用 addClass 和 removeClass 完成的，但是如何写术语不明白如果屏幕分辨率小于 768 像素，我需要这样做，然后将属性 id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" 和类 "dropdown-menu" 添加到 ul 类 small 并从 li parent 类中删除类并删除ul 类nav-child

UPD

我有这个：

<li class="item-104 deeper parent">
  <span class="nav-header ">About</span>
  <ul class="nav-child unstyled small">
   <li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
  </ul>
</li>

我想这样做，当窗口屏幕小于 768px 时：

<li class="item-104 deeper">
      <span class="nav-header " id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</span>
      <ul class="dropdown-menu unstyled small">
       <li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
      </ul>
    </li>

我想删除类 nav-child 和 parent 并添加到 span 属性

有人可以派上用场吗：

$(function () {
    var window_width = 750; // or $(window).width();

    if ($(window).width() < 768) {
      $('.small').addClass('dropdown-menu');
      $('.deeper').removeClass('parent');
      $('.small').removeClass('nav-child');
      $('.deeper .nav-header').attr({id: 'dLabel', type: 'button', 'data-toggle':'dropdown', 'aria-haspopup':'true', 'aria-expanded': 'false'});
    } else {
      $('.small').removeClass('dropdown-menu');
      $('.deeper').addClass('parent');
      $('.small').addClass('nav-child');
      $('.deeper .nav-header').attr({id: '', type: '', 'data-toggle':'', 'aria-haspopup':'', 'aria-expanded': ''});
    }
});

【问题讨论】：

我已经添加了一个解决方案，但不幸的是我不明白你的情况，什么时候属性应该被 romved。
我在答案中添加了一个 sn-p。

标签： javascript jquery html css

【解决方案1】：

添加属性和类可以使用：

$('ul.small').attr({id: 'dLabel', type: 'button', data-toggle:'dropdown', aria-haspopup:'true', aria-expanded: 'false'});
$('ul.small').addClass('dropdown-menu');

删除更简单，因为您将属性设置为空字符串：

$('ul.small').attr({id: '', type: '', data-toggle:'', aria-haspopup:'', aria-expanded: ''});

您的窗口的当前大小可以通过以下方式获得：

$( window ).width()

或者您是否希望在调整大小事件时提供此属性？那就试试吧：

$( window ).resize(function() {
  if ($( window ).width() < 768){
    $('ul.small').addClass('firstClass').addClass('secondClass');
    $('ul.small').attr({id: 'dLabel', type: 'button', data-toggle:'dropdown', aria-haspopup:'true', aria-expanded: 'false'});
  } else {
   $('ul.small').removeClass('firstClass').removeClass('secondClass');
    $('ul.small').attr({id: '', type: '', data-toggle:'', aria-haspopup:'', aria-expanded: ''});
  }
}

作者编辑他的问题后：

var window_width = 750; // or $(window).width();

if ($(window).width() < 768) {
  $('#deeper').removeClass('parent');
  $('#deeper .nav-header').attr({id: 'dLabel', type: 'button', 'data-toggle':'dropdown', 'aria-haspopup':'true', 'aria-expanded': 'false'});
} else {
  $('#deeper').addClass('parent');
  $('#deeper .nav-header').attr({id: '', type: '', 'data-toggle':'', 'aria-haspopup':'', 'aria-expanded': ''});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-104 deeper parent">
  <span class="nav-header ">About</span>
  <ul class="nav-child unstyled small">
   <li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
  </ul>
</li>

【讨论】：

$( window ).resize(function() { if ($( window ).width() > 768){ $('ul').addClass('ferstClass secondClass'); } else { // 删除属性 $('li').removeClass('parent'); } } 这是行不通的 :(
请按照上面的编辑发布您的代码！您必须添加每个班级的个人！
谢谢你 maaan )))) 我爱你 ;D

【解决方案2】：

您正在使用 addClass 和 removeClass，意味着您已包含 jQuery。使用这个：

if($(window ).width() < 768){       // Returns width of browser viewport
     // addClass
 }

【讨论】：

【解决方案3】：

试试这个：

$(document).ready(function(){

    if ($(window).width() < 768) {

        $("ul").attr({id:"dLabel",type:"button",data-toggle:"dropdown",aria-haspopup:"true",aria-expanded="false"});


        $("ul").addClass("dropdown-menu");

        //and rest code..........

    }

    else {

        // go back Default...
    }

})

【讨论】：

【解决方案4】：

alternative：使用 CSS 绘制两种类型并隐藏一种或另一种。

@media screen and (min-width: 0px) and (max-width: 768px) {
  #first { display: block; }
  #second { display: none; }
}

@media screen and (min-width: 768px) {
  #first { display: none; }
  #second { display: block; }
}

在我看来更容易设计和调试

【讨论】：