Question

我正在尝试学习网页设计，当尝试通过java脚本向其中添加类时遇到麻烦。

html代码：

<ul>
    <li onclick="switchChannel(channel1)>
        #Channel1
    </li>
    <li onclick="switchChannel(channel2) class="selected">
        #Channel2
    </li>
    <li onclick="switchChannel(channel3)>
        #Channel3
    </li>

css代码：

.selected{
    color:blue;
    border-left:4px solid blue;
}

javascript：script.js

function switchChannel(channelName) {
    }

javascript：channel.js

    var channel1={
        name:"Channel1",
        createdOn:new Date("April 1, 2016"),
        starred:false
};

     var channel2={
            name:"Channel1",
            createdOn:new Date("April 1, 2016"),
            starred:false
    };

我希望能够从列表中单击一个channel1并对其应用.selected类，但是当单击channel2时，请从该channel1中删除.selected并将其应用于channel2，依此类推...

如果我弄乱了代码中的其他内容，请随时对其进行注释。

Answer 1

这里有很多答案，但是它们似乎并没有解决实际问题。这是一个使用原始JavaScript来完成您所要求的示例。

function switchChannel(el){
  // find all the elements in your channel list and loop over them
  Array.prototype.slice.call(document.querySelectorAll('ul[data-tag="channelList"] li')).forEach(function(element){
    // remove the selected class
    element.classList.remove('selected');
  });
  // add the selected class to the element that was clicked
  el.classList.add('selected');
}

.selected{
    color:blue;
    border-left:4px solid blue;
}

<!-- Add the data-tag attribute to this list so you can find it easily -->
<ul data-tag="channelList">
    <li onclick="switchChannel(this)">Channel 1</li>
    <li onclick="switchChannel(this)" class="selected">Channel 2</li>
    <li onclick="switchChannel(this)">Channel 3</li>
</ul>

Answer 2

您应使用getElementsById和getElementsbyTagName来操作DOM：

function selectChannel(channelNumber) {
  let listItems = document.getElementById("items").getElementsByTagName("li");
  var length = listItems.length;
  for (var i = 0; i < length; i++) {
    listItems[i].className = i+1 == channelNumber ? "selected" : "";
  }
}

.selected {
  color: blue;
  border-left: 4px solid blue;
}

<ul id="items">
  <li onclick="selectChannel(1)">#channel1</li>
  <li onclick="selectChannel(2)" class="selected">#channel2</li>
  <li onclick="selectChannel(3)">#channel3</li>
</ul>

Answer 3

此解决方案使用jQuery，但我认为这可能会对您有所帮助。 here可以看到一个显示此操作版本的CodePen。

jQuery(document).ready(function(){
    jQuery('li').click(function(event){
        //remove all pre-existing active classes
        jQuery('.selected').removeClass('selected');

        //add the active class to the link we clicked
        jQuery(this).addClass('selected');     
        event.preventDefault();
    });
});

Answer 4

我解决了。我感谢大家的帮助。

$('li').removeClass('selected');
$('li:contains(' + channelName.name + ')').addClass('selected');

Answer 5

要将类添加到您单击的元素中：您可以使用“ this”指针指向隐式对象（您刚刚单击的列表项元素）。请尝试以下指令：

this.className =“ selected”;

如何仅突出显示所选的<li>项目？

5 个答案: