Question

每当我点击任何＆＃39; li＆＃39;我想添加active课程。的表。我已经成功地添加了“活跃的”＃39; class，但现在我想使用foreach循环动态添加类。

Blade.php

   @foreach($data as $key=>$item)
        <div class="roles-menu">
            <ul class="nav" id="item_id" onclick="item()">
                            <li id="active" onclick="makeactive()" class="{{ $loop->first ? 'active' : '' }}">
<a style="cursor: pointer" onclick="getID('{{ $item->id }}')">{{ $item->name }}</a></li>

                </li>
            </ul>
            <input hidden id="input" value="{{ $item->id }}">
        </div>

    @endforeach

脚本

<script>
    function makeactive(){
        $('li a').click(function(e) {
            e.preventDefault();
            $(this).addClass('active');
        });
    }
</script>

Answer 1

这样做的一种方法是使用event delegation代替for-loop。这样您就可以向父级添加事件，即使您动态添加事件，所有子级也能够触发该事件（稍后）。我在这里使用for循环来清除当前活动项目中的活动类，然后将新项目设置为活动状态。

＆＃13;

const list = document.querySelector('ul');

list.addEventListener('click', event => {
  if (event.target !== list) {
    const items = list.childNodes;

    // remove current active class
    for (let i = 0; i < items.length; i++) {
      // check if the node is not a text node
      if (items[i].nodeType !== 3) {
        items[i].className = '';
      }
    }
    event.target.className = 'active';
  }
});

＆＃13;

.active {
  color: red;
}

＆＃13;

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

＆＃13;

Answer 2

谢谢你们，但我已经完成了使用简单的课程。看起来问题出现在'onclick'上

            @foreach($data as $key=>$item)
            <div id="roles" class="roles-menu">
                <ul class="nav" id="item_id" onclick="item()">
                    <li id="active" class="{{ $loop->first ? 'active' : '' }}"><a style="cursor: pointer" onclick="getID('{{ $item->id }}')">{{ $item->name }}</a></li>

                </ul>
                <input hidden id="input" value="{{ $item->id }}">
            </div>

            @endforeach

<script>
        $("#item_id li a").click(function() {
            $(this).parent().addClass('active').siblings().removeClass('active');

        });
</script>

添加“活跃”＆＃39;在foreach循环上动态分类

2 个答案: