call javascript function outside foreach loop

Question

I have a problem with my JavaScript function, when I put my script inside foreach loop like code I have below everything work fine, but I think it should be outside, so anyone can give me the advide to resolve this, I appreciate it

@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

linktoahref · Accepted Answer · 2019-06-05 04:01:33Z

Select the <ul> with the class of id and get the data attribute of the current hovered element and hide the respective toggle class.

@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>

Collectives™ on Stack Overflow

call javascript function outside foreach loop

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related