ändern Wert von Tastentext

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> 

ich den Wert Ansicht Artikel zu ausblenden Artikel, wenn ich auf diese Schaltfläche

klicken ändern möchten

mein Skript

function loadMenu(id) { 
var e = document.getElementById(id); 
if(e.style.display == 'block') 
{ 
    e.style.display = 'none'; 
    } 
    else{ 
     e.style.display = 'block'; 
    } 
} 

Answer 1

Erstens Sie sollten anstelle der veralteten Ereignisattribute on* einen unauffälligen Ereignishandler verwenden.

Von dort können Sie das Schlüsselwort this verwenden, um auf die angeklickte Schaltfläche zu verweisen und den Text basierend auf dem aktuellen Wert umzuschalten. Versuchen Sie folgendes:

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>

Oder in 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>

Answer 2

Klar Demo und Code:

html

<button id="button" href="#">Show/Hide</button> 
<div id="item">Item</div> 

js:

$("#button").click(function() { 
$("#item").toggle(); 
}); 

den Link mit der Taste ersetzen:

http://jsfiddle.net/BQUyT/ 

ein weiteres Beispiel

http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/