2017-10-06 56 views
0

在我的laravel 5.2應用程序中我在每個div表中都有jquery的功能來爲鼠標懸停顯示編輯和垃圾圖標。看我的劇本爲什麼在laravel 5.2刀片文件中設置mouseover圖標

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$("a.editInline").css("display","none"); 

$('li').on('mouseover mouseout',function(){ 
    $(this).find('.editInline').toggle(); 
    //find the closest li and find its children with class editInLine and 
    //toggle its display using 'toggle()' 
}); 
</script> 

    @foreach ($project->tasks as $task) 
    <ul> 
    <li> 
    <div> 
    <div class="pull-right icons-align"> 
      <a href="" class="editInline"><i class="glyphicon glyphicon-pencil"></i></a> 
      <a href="" class="editInline"><i class="glyphicon glyphicon-trash"></i></a> 
     </div> 
    <h4><a href="/projects/{{$project->id}}/tasks/{{ $task->id }}">{{ $task->task_name }}</a></h4> 
</div> 
</li> 
</ul> 
    <hr> 


@endforeach 

但在我的刀片檢視所有編輯和垃圾桶圖標顯示和不工作的鼠標懸停顯示功能。

我需要這種類型的編輯和垃圾圖標替代系統。 https://jsfiddle.net/VaibhavD/6aehaxr6/2/embedded/result/

如何修復我的代碼,如上例所示?

+0

需要一些幫助.. – John

回答

0

你的代碼是完美的。只需包含Bootstrap文件並更改像這樣的圖標名稱即可。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<script> 
$("a.editInline").css("display","none"); 

$('li').on('mouseover mouseout',function(){ 
    $(this).find('.editInline').toggle(); 
    //find the closest li and find its children with class editInLine and 
    //toggle its display using 'toggle()' 
}); 
</script> 

    @foreach ($project->tasks as $task) 
    <ul> 
    <li> 
    <div> 
    <div class="pull-right icons-align"> 
      <a href="" class="editInline"><i class="fa fa-pencil"></i></a> 
      <a href="" class="editInline"><i class="fa fa-trash"></i></a> 
     </div> 
    <h4><a href="/projects/{{$project->id}}/tasks/{{ $task->id }}">{{ $task->task_name }}</a></h4> 
</div> 
</li> 
</ul> 
    <hr> 


@endforeach 

試試這個..

+0

我的代碼工作正常與否? –

+0

如果它的工作,然後請upvote我anwer並接受..請 –

0

確定這是工作,因爲這

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 


    @foreach ($project->tasks as $task) 
    <ul> 
    <li> 
    <div> 
    <div class="pull-right icons-align"> 
      <a href="" class="editInline"><i class="glyphicon glyphicon-pencil"></i></a> 
      <a href="" class="editInline"><i class="glyphicon glyphicon-trash"></i></a> 
     </div> 
    <h4><a href="/projects/{{$project->id}}/tasks/{{ $task->id }}">{{ $task->task_name }}</a></h4> 
</div> 
</li> 
</ul> 
    <hr> 


@endforeach 


</head> 

<script> 
$("a.editInline").css("display","none"); 

$('li').on('mouseover mouseout',function(){ 
    $(this).find('.editInline').toggle(); 
    //find the closest li and find its children with class editInLine and 
    //toggle its display using 'toggle()' 
}); 
</script> 
</body> 
</html>