我无法解决这个问题,我的小提琴:
<https://jsfiddle.net/AlexRoPe/z61unf7m/5/>
每次单击按钮都会获得状态类型“焦点”,如果单击不止一次,它将多次执行searchMatchTablee函数。
我希望它只运行一次,完成后可以再次运行。
从Fiddle中可以看出,我使用了变量来进行阻塞,并使用了阻塞,禁用和支持的方法。
window.running = false
window.teste = function() {
$('body').on('click', '#buttonSearch', function(e) {
$('button#buttonSearch').prop('disabled', true)
searchMatchTablee()
$('button#buttonSearch').prop('disabled', false)
})
}
function searchMatchTablee(callback) {
if (running) {
return
}
running = true
console.log('1')
$('.table.table-bordered.table-striped tr').show()
let wordSearch = $('#form\\:globalFilter').val()
document.querySelectorAll('.table.table-bordered.table-striped tr td:nth-child(1)').forEach((b) => {
$('button#buttonSearch').prop('disabled', true)
console.log('running')
if (!(b.innerText.includes(wordSearch))) {
$(b).parent().hide()
}
})
console.log('3')
running = false
}
teste()
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="panel panel-default">
<div class="panel-body"><span id="form:tabelaEspecs">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4 form-group">
<div class="wm-flex wm-left wm-custom-button" style="width: 100%"><input id="form:globalFilter" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all wm-borderless-r">
<button id="buttonSearch" type="button" style="white-space: nowrap; font-size: 12px;" class="btn btn-success wm-borderless-l wm-button-h">Search</button>
</div>
</div>
</div>
<table class="table table-bordered table-striped ">
<thead>
<tr>
<th style="width: 30%">Numbers</th>
</tr>
</thead>
<tbody>
<tr style=""><td>0</td></tr>
<tr style=""><td>1</td></tr>
<tr><td>2</td></tr>
<tr style=""><td>3</td></tr>
<tr style=""><td>4</td></tr>
<tr style=""><td>5</td></tr>
<tr style=""><td>6</td></tr>
<tr style=""><td>7</td></tr>
<tr style=""><td>8</td></tr>
<tr style=""><td>9</td></tr>
<tr style=""><td>10</td></tr>
<tr style=""><td>11</td></tr></tbody>
</table></span>
</div>
</div>
答案 0 :(得分:0)
这是我的建议
$(function() {
$('#buttonSearch').on('click', function(e) {
e.preventDefault();
$(this).prop('disabled', true)
$('.table.table-bordered.table-striped tr').show()
let wordSearch = $('#form\\:globalFilter').val()
$('.table.table-bordered.table-striped tr').each(function() {
var val = $(this).find("td:nth-child(1)").text();
if (!(val.includes(wordSearch))) {
$(this).hide()
}
})
$(this).prop('disabled', false)
});
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="panel panel-default">
<div class="panel-body"><span id="form:tabelaEspecs">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4 form-group">
<div class="wm-flex wm-left wm-custom-button" style="width: 100%"><input id="form:globalFilter" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all wm-borderless-r">
<button id="buttonSearch" type="button" style="white-space: nowrap; font-size: 12px;" class="btn btn-success wm-borderless-l wm-button-h">Search</button>
</div>
</div>
</div>
<table class="table table-bordered table-striped ">
<thead>
<tr>
<th style="width: 30%">Numbers</th>
</tr>
</thead>
<tbody>
<tr style=""><td>0</td></tr>
<tr style=""><td>1</td></tr>
<tr><td>2</td></tr>
<tr style=""><td>3</td></tr>
<tr style=""><td>4</td></tr>
<tr style=""><td>5</td></tr>
<tr style=""><td>6</td></tr>
<tr style=""><td>7</td></tr>
<tr style=""><td>8</td></tr>
<tr style=""><td>9</td></tr>
<tr style=""><td>10</td></tr>
<tr style=""><td>11</td></tr></tbody>
</table></span>
</div>
</div>