在vanilla javascript中实现兄弟姐妹()

时间:2018-02-24 12:04:08

标签: javascript jquery

我正在尝试在vanilla js中执行siblings()在jQuery中所做的事情。我在这里看到了很多有用的解释,但是我在代码上实现它们时遇到了麻烦。

我有一个div里面有4个按钮。每次我点击一个按钮时,一个类(.btn-anim)被添加到该按钮(这到目前为止工作正常)。我想要做的是当我点击其中一个按钮(已经没有类)时,删除任何其他按钮的类并将其添加到单击的按钮。

我的Html标记:

<div id="js-colors-div">
  <button class="yellow"></button>
  <button class="green"></button>
  <button class="blue"></button>
  <button class="pink"></button>
</div>

和Js:

var colorsDiv = document.getElementById('js-colors-div'); 
var colors = colorsDiv.getElementsByTagName("button");

for (var i = 0; i < colors.length; i++) {                   
    colors[i].onclick = function(e) {                                

    var highlight = e.target;

    //trying to achieve this         
    $(this).addClass('btn-anim').siblings().removeClass('btn-anim');          

    }
};

这是我添加类

的代码
highlight.classList.add('btn-anim'); // 

4 个答案:

答案 0 :(得分:2)

在vanilla JS中,你可以遍历父母的孩子,然后跳过元素本身。您可以使用classList方法添加/删除类:

    this.classList.add('btn-anim');
    for (let sibling of this.parentNode.children) {
        if (sibling !== this) sibling.classList.remove('btn-anim');
    }

但是请注意,您可以(也在jQuery中)简化一下:只需从所有按钮中删除该类,然后将其添加到当前按钮中:

    for (let sibling of this.parentNode.children) {
        sibling.classList.remove('btn-anim');
    }
    this.classList.add('btn-anim');

答案 1 :(得分:0)

您可以使用previousElementSiblingnextElementSibling元素。

var colorsDiv = document.getElementById('js-colors-div');
var colors = colorsDiv.getElementsByTagName("button");

for (var i = 0; i < colors.length; i++) {
  colors[i].addEventListener('click', function(e) {
    var highlight = e.target;

    //trying to achieve this         
    this.classList.add('btn-anim');
    addClassSiblings.bind(this, 'btn-anim')();
  });
}

function addClassSiblings(classNames) {
  var cs = this.nextElementSibling;
  while(cs) {
    cs.classList.remove(classNames);
    cs = cs.nextElementSibling;
  }
  
  cs = this.previousElementSibling;
  while(cs) {
    cs.classList.remove(classNames);
    cs = cs.previousElementSibling;
  }
}
.yellow {
  color: yellow
}

.pink {
  color: pink
}

.green {
  color: green
}

.blue {
  color: blue
}

.btn-anim {
  color: black
}
<div id="js-colors-div">
  <button class="yellow">yellow</button>
  <button class="green">green</button>
  <button class="blue">blue</button>
  <button class="pink">pink</button>
</div>

答案 2 :(得分:0)

jQuery中的

.siblings()也允许您使用选择器参数来定位特定的兄弟姐妹,但我认为这没有得到解决。

const getSiblings = (el, sel) => {
    let siblings = [];
    let targets;
    if (sel)
        targets = el.parentNode.querySelector(':scope > ' + sel)
    else
        targets = el.parentNode.children;

    for (let target of targets) {
        if (target !== el)
            siblings.push(target);
    }
    return siblings;
}

然后可以将其用于OP的用例...

const removeAnimClass = (ev) => {
    let siblings = getSiblings(ev.currentTarget, '.btn-anim');
    for (let sibling of siblings) {
        sibling.classList.remove('btn-anim');
}

const colorsDiv = document.getElementById('js-colors-div'); 
const colorBtns = colorsDiv.getElementsByTagName("button");

for (let colorBtn of colorBtns) {                   
    colorBtn.onclick = removeAnimClass;
}

答案 3 :(得分:0)

const colorsDiv = document.getElementById('js-colors-div');
const children = [...colorsDiv.children];

children.forEach((el) => {
  el.addEventListener('click', (e) => {
    children.forEach((btn) => {
      btn.classList.remove('active');
    })
    e.target.classList.add('active');
  });
});
button {
  color: white
}

.yellow {
  background: #ffaf00
}

.pink {
  background: pink
}

.green {
  background: green
}

.blue {
  background: blue
}

.active {
  background: black
}
<div id="js-colors-div">
  <button class="yellow">yellow</button>
  <button class="green">green</button>
  <button class="blue">blue</button>
  <button class="pink">pink</button>
</div>