单击 javascript 时获取列表项的内部值

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

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

<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 时获取列表项的内部值

get the inner value of list item when clicked through javascript

javascript

list

innerhtml