具有 if 语句的相同功能的多个按钮

Question

我尝试制作自己的案例功能，但一旦我在第一次点击时隐藏它们，我就无法让它“显示东西”。所以我的问题是我做错了什么，我该如何解决，我应该怎么做呢？

我唯一的要求是多个按钮可以使用相同的代码来显示/隐藏相同的对象——因此像oddClick 这样的东西将不起作用，因为这需要不必要的点击才能再次获得偶数/奇数（我认为？ )。

        $('.boxbtn').on('click', function () {
        var boxwidth = $('.box').width();
        console.log(boxwidth);
        console.log('-'+boxwidth+'px');
        var state = 1;

        if(state == 0) {  // I think we are trying to compare value here.
/*              alert("foo"); */
            var state = 1;
            console.log(state);
            /*show stuff here*/
        }
        else {
/*              alert("bar"); */
            var state = 0;
            console.log(state);
            /*hide stuff here*/
        }

    });

Answer 1

这行 5: var state = 1;导致它总是进入“else

var state = 1; //placed on global scope
 $('.boxbtn').on('click', function () {
        var boxwidth = $('.box').width();
        console.log(boxwidth);
        console.log('-'+boxwidth+'px');
        //var state = 1; removed from function scope

        if(state == 0) {
/*              alert("foo"); */
            state = 1;
            console.log(state);
            /*show stuff here*/
        }
        else {
/*              alert("bar"); */
            state = 0;
            console.log(state);
            /*hide stuff here*/
        }

    });

小提琴：http://jsfiddle.net/8ubk5c0f/

Answer 2

为了检测对象的状态，您应该使用对象属性（而不是并行的state 变量）。

例如使用boxwidth 的值。

Answer 3

以更简单的方式：

$('.boxbtn').on('click', function () {
    var boxwidth = $('.box').width(); //Not sure why you want this
    console.log(boxwidth);
    console.log('-'+boxwidth+'px');
    var btnVal=$(this).text(); //get the button text
    if(btnVal=="Show Stuff") //if it is show stuff
    {
        $(this).text('Hide Stuff'); //change its text
        alert('stuff shown');
        /*show stuff here*/ //do the functionality
    }
    else {
        $(this).text('Show Stuff'); //change back to normal
        alert('stuff hidden');
        /*hide stuff here*/ //hide functionality
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="boxbtn">Show Stuff</button>

Answer 4

在 click 函数之外声明 state 变量。

var state = 1; // Do not write inside click function scope

Answer 5

var state = 0; //placed on global scope

$('.boxbtn').on('click', function () {
    var boxwidth = $('.box').width();
    console.log(boxwidth);
    console.log('-'+boxwidth+'px');

    if(state == 0) {
        state=1;
        console.log(state);
    }
    else {
        state = 0;
        console.log(state);
    }

});