Question

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

这是我使用的代码。它仅适用于隐藏，但是当我下次点击时它不显示。

$(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();
        });
    });

帮我纠正这个问题。

Answer 1

移动此行：

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() method，jQuery会为jQuery对象中的每个元素调用它，传递对象中当前元素的索引和该元素的当前html。它将html设置为您返回的任何值。所以在这种情况下，只有一个元素，实际上根本不需要索引参数，但你不能将它遗漏，因为当前值是在第二个参数中传递的（所以i只是一种排序占位符）。

Answer 2

您可以使用此代码

 $(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

如何在点击事件上切换两个单词

2 个答案: