时间戳

首页 > 解决方案 > 在 foreach 循环外调用 javascript 函数

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

问题描述

我的 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

标签： javascriptphpajaxlaravel

解决方案

选择<ul>与类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>

推荐阅读