Как добавить событие мыши в набор div и загрузить данные из формы базы данных нажмите div?

Question

Я делаю проект с использованием Laravel 5. Я делаю набор div в соответствии с некоторым динамическим числом. Это все.

Это код для создания выше графики.

<section class="content"> 
     <div class="box box-warning" align="center"> 
      <div class="gap"> 
       <div class="box-body">     
        @foreach($rooms as $room) 
        @if($room->roomState === 'Available') 
        <div id='divelementone' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:yellowgreen;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div> 
        @elseif ($room->roomState === 'UnAvailable') 
        <div id='divelementtwo' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:red;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div> 
        @elseif ($room->roomState === 'notCheckIn') 
        <div id='divelementthree' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:yellow;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div> 

        @endif 
        @endforeach 
       </div> 
      </div> 
     </div><!-- /.box --> 
</section><!-- /.content --> 

Теперь я хочу прикрепить каждый элемент div (квадрат) к событию мыши. когда мышь над div, измените указатель мыши и получите идентификатор определенного значения базы данных, а также, я хочу просмотреть это значение в подсказке инструмента или какой-либо подходящей панели над div (Square).

Я пытаюсь использовать JavaScript для прикрепления события щелчка мыши, но он работает только с первым div (квадратом).

Я новичок в веб-разработке, поэтому у меня нет знаний, как справиться с этим требованием. пожалуйста, ожидайте некоторую экспертную помощь как можно скорее.

Примечание: Моя основная цель - прикрепить события щелчка мыши к каждому элементу и загрузить данные из db и просмотреть их всплывающую подсказку или опцию.

Answer 1

Попробуйте это:

Присоединить JavaScript onclick() события к каждым делам.

В View (лезвия)

<div class="box-body">     
     @foreach($rooms as $room) 
     @if($room->roomState === 'Available') 
     <div onclick="divClick('Available', {{$room->room_code}})" id='divelementone' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:yellowgreen;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div> 
     @elseif ($room->roomState === 'UnAvailable') 
     <div onclick="divClick('UnAvailable', {{$room->room_code}})" id='divelementtwo' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:red;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div> 
     @elseif ($room->roomState === 'notCheckIn') 
     <div onclick="divClick('notCheckIn', {{$room->room_code}})" id='divelementthree' style="width:75px;height:75px;border:1px solid #000;display:inline-block;background-color:yellow;border-radius: 5px;padding-left:10px;padding-right:10px;">{{$room->room_code}}</div> 
     @endif 
     @endforeach  
</div> 

В JavaScript

<script type="text/javascript"> 
    function divClick(roomState, roomCode) 
    { 
    // Your code here 
    // Ajax code for fetching data from DB 


    // Alert the passed room code like this 
    window.alert(roomCode); 
    } 
</script> 

Для изменения мыши использовать указатель CSS стиль div:hover { cursor:pointer; }. Также было бы лучше всего связать отдельный файл CSS для стиля div.

Надеюсь, это полезно.