Question

我是JS的新手。我正在尝试为我的父div添加一个类名，如果我找到了篮球字符串。如何将此类名称 sports sports-with-basketball 直接添加到 div 之后的第一个 body 。但我们并没有用手风琴呈现 div 可能吗？在下面提供我的代码。

  findStringInsideDiv() {

    var str = document.getElementsByClassName("sports-title").innerHTML;

    if ( indexOf("str") === "Basketball" ) {

      //var str = document.getElementById("demo").innerHTML; 

      var className = 'sports sports-with-basketabll';

      //document.getElementsByClassName("sports-title").innerHTML;
      var res = str.replace("sports sports-with-basketabll", "sports");

      console.log("res");

      // how to add this class name directly to the first div after body.
      // but we are not rendering that div in accordion
      //is it possible

    }

  }

Answer 1

您不需要将类名作为空格分隔的字符串处理。相反，您可以使用

向元素添加类

element.classList.add(className);

然后您可以使用

删除它们

element.classList.remove(className);

对于手风琴，一次只展开一个项目，所以如果你有一个expanded类，你可以先从手风琴中的所有项中删除该类，将它们全部关闭，然后只将它添加到被点击以扩展该项目的项目。

＆＃13;

// find all the items with a .sport class
var sports = document.querySelectorAll('.sport');
// add a click event listener to each item
for (i = 0; i < sports.length; i++) {
    sports[i].addEventListener('click', function(e) {
        // when clicked, remove all .expanded classes...
        for (j = 0; j < sports.length; j++) {
            sports[j].classList.remove('expanded');
        }

        // only add the .expanded class to the target of the click
        e.target.classList.add('expanded');
    });
}

＆＃13;

body {
  font-family: arial, helvetica, san-serif;
}

.sport {
  padding: 10px;
  margin-bottom: 5px;

  overflow: hidden;
  border: solid 1px #CCC;
  cursor: pointer;
}

.expanded {
  height: 100px;
}

＆＃13;

<div class="accordion">
  <div class="sport expanded">Baseball</div>
  <div class="sport">Soccer</div>
  <div class="sport">Hockey</div>
  <div class="sport">Football</div>
  <div class="sport">Golf</div>
</div>

＆＃13;

Answer 2

您应该将findStringInsideDiv()中的componentWillMount()功能称为：

componentWillMount() {
    this.findStringInsideDiv();
 }

您的findStringInsideDiv()方法应如下所示：

findStringInsideDiv() {
    var str = document.getElementById("abc").innerHTML;
    str = str.split(" ")[4];
    if ( str === "basketball" ) {
      var menu = document.querySelector('.sports');
      menu.classList.add('sports-with-basketball');
    }
}

看看这个fiddle。

将此类名称sports sports-with-basketball直接添加到正文后的第一个div

2 个答案: