Question

我需要一些帮助，为我的网站beemo-demo.squarespace.com创建一些jQuery。我正在从冒险时间建造Beemo进行练习。我试图让他有多个面孔，当你点击一个按钮（如红色按钮）时，它会隐藏当前面部并显示附在该按钮上的面部。

我目前有以下jQuery用于显示id =＆＃34; face-not-amused＆＃34;当点击红色按钮时，当前面部id =＆＃34;面部正常＆＃34;不隐藏。

$(document).ready(function() {
  $("#circle-red").on('click', function(e){
           $("#face-not-amused").toggle();
         });
     });

我想我需要使用.find（）＆＃39; visible＆＃39;对于id =＆＃34; face-wrapper＆＃34;要查找当前活动的div，然后使用.hide（）在单击按钮时隐藏该div。我不知道如何解决这个问题，我正在寻求帮助。我最终会有多张脸，因为现在我只有两张脸。

Answer 1

你的想法是正确的。

使用

$("#face-wrapper").find("div:visible").hide();

请务必在切换$（“＃face-not-amused”）;

之前放置它

Answer 2

您可以保持关联的面部和按钮之间的关系，例如同一类或类似的id。然后处理click事件。如果将来添加新按钮，则只需添加此关系，但点击功能可以保持不变。

所以，如果你有像

这样的div

<div class='face one'>face one</div>

按钮如

<button id='one' class='btnFace one'>One</button>

您可以将点击事件写为

$('button').click(function(){
var clickedId = $(this).attr('id');
    $('.face').hide();
    $('div.'+clickedId).show();
});

请参阅此示例fiddle。

Answer 3

CSS

#face-normal { display: block; }
#face-not-amused { display: none; }
.amused #face-normal { display: none; }
.amused #face-not-amused { display: block; }

JS

$(document).ready(function() {
    $("#circle-red").on('click', function(e){
        $("#face-not-amused").parent().toggleClass('amused');
    });
});

单击Jquery查找并隐藏当前div

3 个答案: