Javascript 使用jQuery单击其他元素时隐藏元素

所以我想有一个功能来切换我的图像下的一些文本。 以下是切换的脚本：

$(document).ready(function(){
    $('.mariage').click(function(event){
        event.stopPropagation();
         $(".result_mariage").slideToggle("fast");
    });
    $(".result_mariage").on("click", function (event) {
        event.stopPropagation();
    });
});

$(document).on("click", function () {
    $(".result_mariage").hide();
});

脚本按预期工作，除非用户单击另一个链接并执行其他信息切换，即切换堆栈，而不是隐藏最后一个。如果我单击除另一个切换之外的任何其他位置，信息将隐藏，一切正常

（这里是我点击触发“bug”的地方的图片）

JS小提琴示例：

对不起，如果我的英语不是很好，那不是我的主要语言

希望这些解释足够清楚，即使我对此表示怀疑，您也能帮助我：/ 请不要犹豫，问更多的信息，这样我可以提供你需要帮助我

所以，为了简短起见，当我单击我的新切换时，如何隐藏我以前的切换？

编辑的答案 因此，您遇到的最大问题是您没有试图理解代码。许多新程序员的一个大问题是（不幸的是，和许多一直在编码的人一样），他们就是我所说的复制编码器。在stackoverflow上复制教程和答案可以让你创建网站，完成一些咨询工作，甚至支持你的整个职业生涯，但这与实际知道如何编程并不相同

这样做辅导和提问是非常好的（事实上，这是我90%的知识都是通过这种方式学到的），但是你必须从你的发现中学习，而不仅仅是完成你正在做的事情。我给你的建议是重新阅读我的原始答案（我在下面没有提及），并理解如何利用我展示的内容来实现你想要的。 话虽如此，我完成了我开始的工作，让我们继续解决这个问题：

我已经将您的JSFIDLE复制到Github代码段中，以便您和未来的用户可以在答案中看到结果。我立即注意到的第一件事是我的代码 从原始答案复制到您现有的JS中。虽然这很好，并且您正确地将“text”更改为“\u result”，但您遗漏了一些内容：

• 我的代码获取单击元素的ID，并使用该ID查找应该取消隐藏的内容的ID。虽然您正确地更改了查找代码以适应文本上的ID，但您没有向正在单击的图像添加任何ID，因此我的代码无法执行任何操作
• 您也没有删除最初用于实现此功能的4个函数，因此它使我的代码看起来好像在做某些事情并且工作不正确，而事实上我的代码什么也没做，而您的代码仍然在做它以前做过的事情（尽管我确实看到了您之前谈论的bug）
• 关于我上面的抄写员的咆哮，请注意你和我如何以不同的方式处理这个问题，以及你可以从中学到什么。
  • 虽然您希望通过查找每个项的类（完全不相关，但您没有正确使用类和“mariage”等）将侦听器函数附加到每个项上，但我选择将侦听器附加到单个类的所有元素上，然后通过id查找它们
  • 您的解决方案要求您为添加的每个项编写新的JS代码，并且每次编写这些函数时都有拼写错误或忘记更改某些内容的风险
  • 我的解决方案允许您向HTML添加任意多的元素，而无需更改JS。只要您的图像有一个id，而文本的id等于“图像id”+“\u结果”，该功能就会自动执行

我试图尽可能少地修改您的代码，只需删除4个函数，并在图像中添加ID（“mariage”和“amour”），即可让您的小提琴正常工作

我从你的小提琴上去掉了四个功能：

//我的航海结果切换代码->文本#1
$（文档）.ready（函数（）{
$（'.mariage'）。单击（函数（事件）{
event.stopPropagation（）；
$（“#mariage_结果”）。滑动切换（“快速”）；
});
$（“#mariage_result”）。在（“单击”上，函数（事件）{
event.stopPropagation（）；
});
});
$（文档）。在（“单击”，函数（）上）{
$（“#result_mariage”）.hide（）；
});
//我的爱情结果->文本2的切换代码
$（文档）.ready（函数（）{
$（'.amour'）。单击（函数（事件）{
event.stopPropagation（）；
$（“爱情结果”）。滑动切换（“快速”）；
});
$（“#amour_result”）。在（“单击”上，函数（事件）{
event.stopPropagation（）；
});
});
$（文档）。在（“单击”，函数（）上）{
$（“#爱情结果”）.hide（）；
});
据我从您的问题中了解，这可能会有所帮助

$(document).ready(function(){
        var checker = false;
        $('.mariage').click(function(event){
            event.stopPropagation();
            if(!checker){
                $(".result_mariage").hide("slow");
                checker = true;
            }
            else{
                $(".result_mariage").show("slow");
                checker = false;
            }
        });
        $(".result_mariage").on("click", function (event) {
            event.stopPropagation();
        });

        $(document).on("click", function () {
            if(!checker){
                $(".result_mariage").hide("slow");
                checker = true;
            }
            else{
                $(".result_mariage").show("slow");
                checker = false;
            }
        }); 
    });

您应该添加一个jquery标记，以便将您的问题放入该列表。。。我已经测试了你的解决方案，但现在它似乎不起作用。。。如果你想看的话，我添加了我的html结构。什么不起作用？单击任何一个框，使数字显示在其中，然后单击另一个框，看到第一个数字消失，新数字显示。这不是你想要的吗，“当我点击另一个元素时隐藏元素”？我试着让它和我的东西一起工作，但它不工作。。。。所以不确定是我不知道如何调整它或什么：/I如果你想查看它，我把我的html放在我的第一篇文章中。我把这个放在我的代码中：让lastClicked=null$（“.hover_selection”）。单击（函数（）{if（lastClicked）{lastClicked.hide（）}让我=$（“#”+this.id+“_result”）；me.show（）；lastClicked=me；}）；+我已经有了JS。再次感谢你的帮助，别担心，我一点也不生气。我忘了提到我还不知道JS。。。我打算在我有时间的时候学习它（我只是出于一种激情和对我妻子的热爱而编写代码）