javascript - 更改按钮文本的值

Question

<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';
    }
} 

Answer 1

首先，您应该使用不显眼的事件处理程序，而不是过时的 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>