找出使用Javascript进行的按钮更改

Figure out what button change was made using Javascript?

本文关键字：按钮 Javascript      更新时间：2023-09-26

我对Javascript很陌生，一直在尝试在我的ASP中使用Javascript。. NET MVC项目。

我有一个按钮，onclick变化，例如从开到关。有很多这样的按钮——每个记录一个。我想弄清楚按钮按下时的变化，即它是否变成了OFF或ON?

目前，我正在使用if语句来检查togglecclass，但是，我不认为这是当前的方法，并且该语句在需要时不会产生True。

下面是一些示例代码: 
<a id="menu-toggle_@j" href="#" class="btn btn-xs"><i class="glyphicon glyphicon-chevron-up"></i></a>
<script>
    $('#menu-toggle_@j').click(function () {
         $(this).find('i').toggleClass('glyphicon glyphicon-chevron-up').toggleClass('glyphicon glyphicon-down');
             $(if('#menu-toggle_@j').toggleClass('glyphicon glyphicon-down')){

如果一个按钮的状态是由一个类决定的，那么可以很容易地检索它的状态。只使用$.hasClass():

$('button').click(toggleBtn);
$('#getEveryStatus').click(getEveryStatus);
function toggleBtn(){
    $(this).toggleClass('on');
    
    if($(this).hasClass('on')){
        $(this).next('.status')
               .text('The button above is now ON.');
    } else {
        $(this).next('.status')
               .text('The button above is now OFF.');
    }
}
function getEveryStatus(){
    var list = '';
    $('button').each(function(i){
    	list += 'Button #' + i + ' is ' + ($(this).hasClass('on')? 'ON':'OFF') + '.'n';
    });
    
    alert(list);
}
button{
    width: 4em;
    height: 2em;
    border-radius: 2em;
    border: none;
    outline: none;
    position: relative;
    background: #ddd;
    cursor: pointer;
    -webkit-transition: background .2s ease;
    transition: background .2s ease;
}
button.on{
    background: #63e63e;
}
button:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 3em;
    height: 2em;
    width: 2em;
    margin-top: -1em;
    margin-left: -1em;
    background: #fff;
    border-radius: 2em;
    box-shadow: 0 0 5px rgba(0,0,0,.5);
    -webkit-transition: left .2s ease;
    transition: left .2s ease;
}
button.on:before{
    left: 1em;
}
#getEveryStatus{
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button></button>
<p class="status">The button above is now OFF.</p>
<button></button>
<p class="status">The button above is now OFF.</p>
<p id="getEveryStatus">Click here to get every status</p>

相关文章：