Javascript 如何在单击事件时切换两个单词

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

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

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

请帮助我更正此问题。

移动此行：

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

演示：

编辑：如果将回调传递给，jQuery将为jQuery对象中的每个元素调用回调，传递对象中当前元素的索引以及该元素的当前html。它将html设置为您返回的任何值。因此，在只有一个元素的情况下，实际上根本不需要索引参数，但您不能忽略它，因为当前值在第二个参数中传递（因此
i
只是一种占位符）。
您可以使用此代码

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

您必须在
.flip1
的单击事件之前使用
var val=0
，但在您的替代代码中，在oldthl参数之前有i参数。我不明白我为什么在那里。你能解释一下吗？我已经更新了答案。之所以有
i
参数，是因为jQuery使用两个参数调用该函数，而用于此目的的参数是第二个参数。（你可以给参数取任何你喜欢的名字。）