Question

我有一个用户列表，我正在从数据库中检索所有用户并将其列为下面

<div class="online-users">
    <ul id="outer-list">
        @foreach($users->getUsers() as $user)
            {{--remove white spaces from name--}}
            <?php $name = str_replace(' ','-',$user->name);?>

                <li onclick="openMessageBox()" id="user" class="inner-list-item">{{$user->name}}</li><br>

        @endforeach
    </ul>
</div>

这是我想点击任何列表项时想要实现的，我想抓住该用户的名字。但到目前为止我所尝试的是

<script>
    function openMessageBox(){
        var user_id = document.getElementById('outer-list');
        user_id=user_id.getElementsByClassName('inner-list-item').innerHTML;
        window.alert(user_id);
        document.getElementById('message-box').style.display="block";

    }
</script>

如果我将[index]与

一起使用，它只会让我访问用户的名字

user_id=user_id.getElementsByClassName('inner-list-item')[5].innerHTML;

我不想每次都明确告诉索引。有没有办法实现这个目标？

Answer 1

您需要将当前参考作为参数传递。

<input id="theId" value="test" onclick="doSomething(this)" />

// Javascript
function(elem){
    var value = elem.value;
    var id    = elem.id;
    ...
}

Answer 2

您可以将元素引用传递给函数：

<li onclick="openMessageBox(this)" id="user" class="inner-list-item">{{$user->name}}</li><br>

然后只需阅读元素的textContent来获取用户名（这也适用于属性，如评论中建议的@ rybo111）：

function openMessageBox(el){
    var name = el.textContent;
}

简单实例：

function openMessageBox(el){
  var name = el.textContent;
  alert(name);
}

<ul>
  <li onclick="openMessageBox(this)">Alice</li>
  <li onclick="openMessageBox(this)">Bob</li>
</ul>

顺便说一下。你最终会在这些li元素上有重复的user ID。

通过javascript点击获取列表项的内部值

2 个答案: