如何将鼠标事件添加到 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(square) 元素附加到鼠标单击事件。当鼠标悬停在 div 上时，更改鼠标指针并获取一些特定于数据库值的 id，并且我想在工具提示或 div（Square）上方的某个合适面板中查看该值。

我尝试使用 JavaScript 来附加鼠标点击事件，但它只适用于第一个 div(square)。

我是 web 开发的新手，所以我不知道如何处理这个要求。请尽快得到专家的帮助。

注意： 我的主要目的是将鼠标单击事件附加到每个 div 并从 db 加载数据并查看它们的工具提示或选项窗格。

Answer 1

试试这个：

将 JavaScript onclick() 事件附加到每个 div。

在视野中（刀片）

<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; }。此外，最好为 div 样式链接一个单独的 CSS 文件。

希望这有帮助。

Answer 2

<div class="box-body">                
      @foreach($rooms as $room)
         <div onclick="divClick({{$room->roomState}}), {{$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>
      @endforeach    
</div>