单击循环按钮时按钮文本更改
Button Text Change on click for a loop buttons
当用户点击 "receiver list" 按钮时,按钮文本应更改为 "loading..."。这些按钮位于 For 循环中。我猜 id 属性方法是行不通的。逻辑是当用户点击 "receiver list" 按钮时,按钮将变为 "loading..." 并加载它转到的页面。
@foreach($groups as $group)
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-success card-header-icon">
<div class="card-icon">
<i class="material-icons">store</i>
</div>
<a class="btn btn-info p-2" href="{{action('ReceiverController@index', $group)}}">
<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Receiver List
</a>
</div>
</div>
</div>
假设 p-2
class 对于这些按钮是唯一的,这应该很简单:
$(document).on('click', '.p-2', function(){
let html = `<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Loading...`
$(this).html(html);
});
如果 p-2
不是唯一的,则只需添加其他一些唯一的 class 名称。
或没有jquery:
function load(){
let html = `<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Loading...`
this.innerHTML = html;
}
document.getElementsByClassName('.p-2').addEventListener("click", load);
只需使用 javascript 的内联 onclick
事件:
<a class="btn btn-info p-2" onclick="this.innerHTML='loading...'" href="{{ action('ReceiverController@index', $group) }}">
<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Receiver List
</a>
如果您也想要按钮图标:
<a class="btn btn-info p-2" onclick="clickfunc(this)" href="{{ action('ReceiverController@index', $group) }}">
<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Receiver List
</a>
<script>
clickfunc = function(obj) {
obj.innerHTML = '<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i> loading...';
}
</script>
当用户点击 "receiver list" 按钮时,按钮文本应更改为 "loading..."。这些按钮位于 For 循环中。我猜 id 属性方法是行不通的。逻辑是当用户点击 "receiver list" 按钮时,按钮将变为 "loading..." 并加载它转到的页面。
@foreach($groups as $group)
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-success card-header-icon">
<div class="card-icon">
<i class="material-icons">store</i>
</div>
<a class="btn btn-info p-2" href="{{action('ReceiverController@index', $group)}}">
<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Receiver List
</a>
</div>
</div>
</div>
假设 p-2
class 对于这些按钮是唯一的,这应该很简单:
$(document).on('click', '.p-2', function(){
let html = `<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Loading...`
$(this).html(html);
});
如果 p-2
不是唯一的,则只需添加其他一些唯一的 class 名称。
或没有jquery:
function load(){
let html = `<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Loading...`
this.innerHTML = html;
}
document.getElementsByClassName('.p-2').addEventListener("click", load);
只需使用 javascript 的内联 onclick
事件:
<a class="btn btn-info p-2" onclick="this.innerHTML='loading...'" href="{{ action('ReceiverController@index', $group) }}">
<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Receiver List
</a>
如果您也想要按钮图标:
<a class="btn btn-info p-2" onclick="clickfunc(this)" href="{{ action('ReceiverController@index', $group) }}">
<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i>
Receiver List
</a>
<script>
clickfunc = function(obj) {
obj.innerHTML = '<i class="fa fa-list-ol" style="height:55px; width:30px;" aria-hidden="true"></i> loading...';
}
</script>