1

我想在切换面板时切换打开和隐藏单词。

这是我使用的代码。它仅适用于隐藏,但是当我下次单击时它不会显示打开。

$(document).ready(function(){
        $(".flip1").click(function(){
            $(".panel1").slideToggle("slow");
       var val= 0;
       if(val==0){
        $('#word').html("hide").show();
        val=1;
       }else{
        $('#word').html("open").show();
        val=0;

       }
           // $(".info").hide();
        });
    });

帮我纠正这个。

4

2 回答 2

2

移动这一行:

var val= 0;

click()回调。

在你拥有它的地方,它是你点击处理程序中的一个局部变量,0每次调用处理程序时它都会被设置为。将它移到处理程序之外,它将被初始化0一次,然后在单击处理程序中更新。

或者,完全摆脱该变量并执行以下操作:

$(document).ready(function(){
    $(".flip1").click(function(){
        $(".panel1").slideToggle("slow");
        $("#word").html(function(i,oldHtml) {
           return oldHtml==="hide"?"show":"hide";
        }).show();
    });
});

演示:http: //jsfiddle.net/9S5eq/

编辑:如果将回调传递给.html()方法,jQuery 会为 jQuery 对象中的每个元素调用它,传递对象中当前元素的索引和该元素的当前 html。它将 html 设置为您返回的任何值。因此,在只有一个元素的情况下,实际上根本不需要 index 参数,但您不能将其省略,因为当前值是在第二个参数中传递的(因此i只是一种占位符)。

于 2012-12-16T04:37:12.013 回答
1

你可以使用这个代码

 $(document).ready(function(){
    var val= 0;
    $(".flip1").click(function(){
        $(".panel1").slideToggle("slow");

   if(val==0){
    $('#Word').html("hide").show();
    val=1;
   }else{
    $('#Word').html("open").show();
    val=0;

   }
       // $(".info").hide();
    });
});

您必须var val=0在点击事件之前使用.flip1

于 2012-12-16T05:20:28.780 回答