Question

我想将jquery代码转换为javascript，其中当窗口高度小于50时，在li的第一个孩子上未添加或删除其他li子类上添加或删除的类。在下面显示jQuery代码

bind

Answer 1

window.onscroll = function(e) {
    if (e.target.scrollHeight > 50) {
        document.querySelectorAll(".responsive - header.social - icons.social - icon li:not(:first-child)").forEach(function (el) {
            el.classList.add('hidden');
            el.classList.remove('show');
        }) 
    }
};

我没有测试，但是想法是这样的

Answer 2

自从类被删除并添加以来，排除第一个<li>的最简单，最可靠的方法是给它一个类并将其放置在要从其排除的类的后方之后。

使用MediaQueryList界面侦听视口高度的变化，并在MQL与视口高度匹配时触发回调函数。

// Create a MediaQueryList 
var mql = window.matchMedia('(max-height: 50px)');

// Add a listener to MQL
mql.addListener(shortWin);

/*
- Callback function passes Event Object
- Reference the <ol>
- if the MQL matches the viewport height...
- Add class .short to <ol>
- Otherwise remove class .short
*/
function shortWin(e) {
  var list = document.querySelector('ol');
  if (e.matches) {
    list.classList.add('short');
  } else {
    list.classList.remove('short');
  }
}

.short li {
  background: magenta
}


/* This CSS selector will always override .short*/

.short li.first {
  background: initial;
}

<ol>
  <li class='first'>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
  <li>ITEM</li>
</ol>

Answer 3

document.getElementById('share').addEventListener("click",show);
    function show(){
        var divs = document.querySelectorAll('#social-icons > li:not(.share)');
        for (var i = 0; i < divs.length; i++) {
            divs[i].classList.toggle("show");
            divs[i].classList.toggle("hidden");
        }
    }

如何使用javascript在li第一个孩子上添加或删除类

3 个答案: