如何将鼠标事件添加到divs集合并从数据库表单中加载数据单击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上时，更改鼠标指针并获得一些数据库值特定的id，并且我想在工具提示或div（Square）上的某个合适的面板中查看该值。

我尝试使用JavaScript来附加鼠标单击事件，但它只与第一个div（方形）一起使用。

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

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

Answer 1

试试这个：

附加的JavaScript onclick()事件到每一个DIV。

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

希望这是有帮助的。