<div>
<button type="button" style="width:250px;"onclick="loadMenu('menu_${bookings.bookingId}')" class="btn btn-default btn-sm">View Items</button>
</div>
<div id="menu_${bookings.bookingId}" style="display: none;">
${bookings.products}
</div>
我想在单击该按钮时将查看项目的值更改为隐藏项目
我的脚本
function loadMenu(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
{
e.style.display = 'none';
}
else{
e.style.display = 'block';
}
}
最佳答案
首先,您应该使用不显眼的事件处理程序,而不是过时的 on*
事件属性。
从那里,您可以使用 this
关键字来引用单击的按钮并根据其当前值切换其文本。试试这个:
document.querySelectorAll('.booking-toggle').forEach(function() {
this.addEventListener('click', function(e) {
var id = e.target.getAttribute('data-bookingid');
var booking = document.getElementById(id);
booking.style.display = booking.style.display == 'block' ? 'none' : 'block';
e.target.innerText = e.target.innerText == 'View Items' ? 'Hide Items' : 'View Items';
});
});
<div>
<button type="button" style="width:250px;" data-bookingid="bookingId_1" class="btn btn-default btn-sm booking-toggle" id="foo">View Items</button>
</div>
<div id="bookingId_1" style="display: none;">
${bookings.products}
</div>
或者在 jQuery 中:
$('.booking-toggle').click(function() {
var $btn = $(this);
$('#' + $btn.data('bookingid')).toggle();
$btn.text(function(i, t) {
return t == 'View Items' ? 'Hide Items' : 'View Items';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button type="button" style="width:250px;" data-bookingid="bookingId_1" class="btn btn-default btn-sm booking-toggle" id="foo">View Items</button>
</div>
<div id="bookingId_1" style="display: none;">
${bookings.products}
</div>
关于javascript - 更改按钮文本的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41220489/