javascript - 在 foreach 循环之外调用 javascript 函数

Question

我的 JavaScript 函数有问题，当我将脚本放入 foreach 循环中(如下面的代码)时，一切正常，但我认为它应该在外部，所以任何人都可以给我建议来解决这个问题，我很感激它

@foreach($messages->reverse() as $message )
    <ul class="id{{$message->id}}" data-id="{{$message->id}}">
        <li class="message">
            <div class="text {{ ($message->to!=Auth::user()->id)?'not_owner':'owner'}}">
                {{$message->text}}
            </div><br>
        </li>
        <li class="message">
            <div class="time {{ ($message->to!=Auth::user()->id)?'not_owner':'owner'}}">
                <div style="display: flex; flex-wrap: nowrap;">
                @if($message->to!=Auth::user()->id)
                    <div style="display: table">
                        <a onclick="togglediv('item{{ $message->id }}')" class="toggle{{$message->id}} hidden" style=" text-decoration: none; margin-right: 5px; cursor: pointer" > <span class="dot"></span>
                            <span class="dot"></span>
                            <span class="dot"></span></a>
                        <div id="item{{ $message->id }}" style="display:none;"><button value="{{$message->id}}" class="btn-remove" >remove</button></div>
                    </div>
                @endif
                    {{ \Carbon\Carbon::parse($message->created_at)->format('M d, h:i')}}
                </div>
            </div>
        </li>
    </ul>
    <script>
        $('.id{{ $message->id }}').hover(function(){
            $('.toggle{{ $message->id }}').toggleClass('hidden');
        });
    </script>
@endforeach

Answer 1

选择<ul>类(class) id并获取当前悬停元素的数据属性并隐藏相应的切换类。

@foreach($messages->reverse() as $message )
    <ul class="id" data-id="{{$message->id}}">
        <li class="message">
            <div class="text {{ ($message->to!=Auth::user()->id)?'not_owner':'owner'}}">
                {{$message->text}}
            </div><br>
        </li>
        <li class="message">
            <div class="time {{ ($message->to!=Auth::user()->id)?'not_owner':'owner'}}">
                <div style="display: flex; flex-wrap: nowrap;">
                @if($message->to!=Auth::user()->id)
                    <div style="display: table">
                        <a onclick="togglediv('item{{ $message->id }}')" class="toggle{{$message->id}} hidden" style=" text-decoration: none; margin-right: 5px; cursor: pointer" > <span class="dot"></span>
                            <span class="dot"></span>
                            <span class="dot"></span></a>
                        <div id="item{{ $message->id }}" style="display:none;"><button value="{{$message->id}}" class="btn-remove" >remove</button></div>
                    </div>
                @endif
                    {{ \Carbon\Carbon::parse($message->created_at)->format('M d, h:i')}}
                </div>
            </div>
        </li>
    </ul>
@endforeach
<script>
    $(document).ready(function () {
        $('.id').hover(function(){
            let id = $(this).attr('data-id');
            $('.toggle' + id).toggleClass('hidden');
        }, function () {
            let id = $(this).attr('data-id');
            $('.toggle' + id).toggleClass('hidden');
        });
    });
</script>