javascript - 找出使用 Javascript 进行了哪些按钮更改？

Question

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

我有一个 onclick 改变的按钮，例如从开到关。有许多这样的按钮——每条记录一个。我想弄清楚按下按钮时会发生什么变化，即它是关闭还是打开？

目前，我正在使用 if 语句来检查 toggleClass，但是，我不认为这是当前的方法，并且该语句在需要时不会产生 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')){

如有任何帮助，我们将不胜感激。

Answer 1

如果按钮的状态由类确定，您可以轻松地检索它的状态。只需使用 $.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>