Question

我现在已经在i-net上搜索了2天，仍然无法找到问题的解决方案，所以我想问你。

背景：我有一个包含列表项的无序列表，每个li都有一个:: after元素。我想在点击:: after Element后向li添加一个类。

以下是重要的代码：

＆＃13;

/* jslint browser: true */
/*global window */
window.onload = function() {


 //Possible Solution - 1st Try
var lit = document.getElementById("li1");

function showMe(){
    this.classList.add("in-view");
    console.log(this.className);
}
document.getElementById("li1").addEventListener("click", showMe.bind(this,lit),false);


// Possible Solution - 2nd Try
   var liitems = document.getElementsByClassName("liitems");
   
function pullTextOnClick() {
    liitems[i].classList.add("in-view");
    }
    
for (var i=0; i<liitems.length; i++) {
    liitems[i].addEventListener("click",pullTextOnClick, false);
}

};

＆＃13;

.timeline ul li {
    list-style-type:none;
    position:relative;
    width:6px;
    margin:0 auto;
    padding-top:50px;
    background:#fff;
}

.timeline ul li::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:0;
    transform: translateX(-50%);
    width:50px;
    height:50px;
    border-radius:50%;
    background: inherit;
    cursor:pointer;
}

＆＃13;

<div class="container">
    <section class="timeline" id="timelineexpand">
        <ul>
            <li class="liitems" id="li1" onclick="showMe()">
                <div>
                    <time>1992</time>
                    Sth happend
                </div>
            </li>
            <li class="liitems" id="li2">
                <div>
                    <time>1997</time>
                   Sth else
                </div>
            </li>

＆＃13;

我如何理解我的问题以及我在互联网上发现的内容： addEventListener使用对象引用打开第二个参数（eventHandler）。也就是说，当我用控制台登录时，通常是＆＃34;窗口＆＃34;或＆＃34;未定义＆＃34;。所以我必须以某种方式告诉函数（showMe或pullTextOnClick）什么＆＃34;这个＆＃34;是或使用哪种元素。

我更喜欢它，如果eventListener将在for循环中并不断检查是否点击了li-Node。如果发生这种情况，则应将li元素的索引转发给该函数，然后将该类添加到＆＃34; in-view＆＃34;。

问题：函数showMe / pullTextOnClick不会触发。如果我在这些函数中添加了console.log，它们就不会记录任何内容。这是为什么？

所以我希望有人可以解释为什么我的代码不起作用或如何改进它。谢谢！

我的问题摘要：

为什么＆＃34; / 全局窗口 /做什么，什么？这是在评论中，但如果我不添加它，它会说＆＃34; window.onload＆＃34;未定义。
如何将eventTarget（li-element）绑定到eventHandler-fct（showMe，pullTextOnClick）？
＆＃34; bind＆＃34; -fct如何工作？我读了很多解释，但仍然不明白为什么我的代码不起作用。
我尝试使用＆＃34; addClass＆＃34;添加一个类，但它说没有定义fct。它只适用于classList.add。，但为什么？

Answer 1

问题解决了：

我试图点击li元素。但是当我尝试这样做时，选择了父容器。原因是，因为li元素的z-index为-1。我这样做是为了把它藏在另一张照片后面。经验教训。

addEventListener不会在for循环中的<li>上触发

1 个答案: