點擊查找並隱藏當前div jquery

我需要一些幫助爲我的網站beemo-demo.squarespace.com創建一些jQuery。我正在冒險時間修建Beemo進行練習。我試圖讓他有多個面孔，當你點擊一個按鈕（如紅色按鈕）時，它會隱藏當前面部並顯示附着到該按鈕的面部。點擊查找並隱藏當前div jquery

我目前有下面的jQuery，它可以在單擊紅色按鈕時顯示id =「face-not-amused」，但是當前臉部id =「face-normal」不會隱藏。

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

我想我需要使用.find（）「看得見」的ID =「麪包裝」，找到當前活動的DIV，然後使用.hide（）當一個按鈕以隱藏該div被點擊。我不知道如何去解決這個問題，並正在尋求幫助。我最終會爲他多面，因爲現在我只有兩張臉。

來源

2015-04-08 u111937

如果這是更復雜的話，你的html會有幫助，但是aSharma的答案是總體上有用的。 – DrCord

可以理解。今天去嘗試aSharma的答案，看看它的工作情況如何。我認爲這是我正在尋找的東西，所以手指交叉！再次感謝所有幫助大家！ – u111937

你的想法是正確的。

使用

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

確保切換$（「＃面子 - 不開心」）之前，將其放置;

來源

2015-04-08 15:11:57 user2576247

直接在jquery中更好地添加/刪除css類而不是show./hide，因爲它更高效並允許添加css效果 –

CSS

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

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

來源

2015-04-08 15:23:12

如果我的理解是正確的，那麼這個JS對普通人臉不顯示任何東西。當我有兩個以上的面孔時會發生什麼？例如，如果我有6張臉並且有人正在查看臉部3，則他們單擊臉部2的紅色按鈕，我需要JS知道當前div是什麼，因此它知道隱藏當前的div。 – u111937

你可以把相關的面部和按鈕，例如之間的關係相同的類或相似的ID。然後處理點擊事件。如果未來添加新按鈕，則只需添加此關係，但點擊功能可以保持不變。

所以，如果你有一個像

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

的div和按鈕像

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

你可以寫單擊事件作爲

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

見這個例子fiddle。

來源

2015-04-08 15:26:44 wonderbell

點擊查找並隱藏當前div jquery

回答

相關問題