JavaScript點擊更改整個div

我有一個產品列出的網站。有大約30個產品。現在有鏈接去每個產品的詳細信息。我想把它們放在一個頁面上，並通過JavaScript ，在點擊時更改特定div的內容。我所知道的是，我可以創造30個功能改變1個格的顯示器none..and顯示另一個.... 如何實現this..I正在做這樣的事情JavaScript點擊更改整個div

function changeImg2() 
{ 
$('#change_content').stop(true, true).fadeOut({ duration: slideDuration, queue: false }).css('display', 'none'); 
$('#change_content2').stop(true, true).fadeIn({ duration: slideDuration, queue: false });  
}

這裏是DIV類型的，我有

<div id="change_content1"> 
           <div class="viewport"> 
     <a id="btn" href="http://www.flickr.com/photos/matt_bango/3479048548/"> 
      <span class="dark-background">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span> 
      <img src="images/HAND HELD POWER CUTTERS.jpg" alt="Northern Saw-Whet Owl" /> 
     </a> 
    </div> 

    <div class="viewport no-margin"> 
     <a href="http://www.flickr.com/photos/matt_bango/3478879694/"> 
      <span class="dark-background">Red-shouldered Hawk <em>Photo by Matt Bango</em></span> 
      <img src="images/LIGHTING TOWERS.jpg" alt="Red-shouldered Hawk" /> 
     </a> 
    </div> 

    <div class="viewport"> 
     <a href="http://www.flickr.com/photos/matt_bango/3478189088/"> 
      <span class="light-background">Blue-headed Vireo <em>Photo by Matt Bango</em></span> 
      <img src="images/MAGNETIC STAND DRILLS.jpg" alt="Blue-headed Vireo" /> 
     </a> 
    </div> 

    <div><input name="back" value="back" id="back_btn1" type="button"></div> 
</div>

但這代碼也不行......因爲我將不得不重複30個div's.Is有一個更清潔的方式來實現這一目標。

來源

2013-02-04 user2039087

顯示您的示例html內容**並記住：**您從未真正需要將相同的功能超過1次。 –

我剛剛添加了我想要替換的div的類型...問題是如何引用當前顯示的div並隱藏它...然後通過按鈕顯示其他div ... – user2039087

使用這樣的事情：

$('.myDiv').click(function() { 
    $('.myDiv').hide(); //Or whatever function you like 
    $(this).show(); //or whatever function you like 
});

的想法是它隱藏所有div用相同的類，然後$(this)用於控制單個div被點擊。

您可以針對所有的div給他們一個類似的類，或者如果他們都在父母的包裝使用類似$('.parent-wrapper > div')

答案評論：

$(this)事件等中使用時因爲點擊功能與事件觸發的元素有關。在這種情況下，它將是單個div上的點擊事件，這意味着您可以使用它來操縱該div而不會針對其他div。

如上所述，使用類似的類或選擇器將允許您定位所有div，因此您可以將它們作爲一個組來操作。請注意，目標div可能會包含在內，因此請操作目標div之前的組。

或者，您可以使用$(this).siblings()來操縱所有其他div，如果它們與點擊的div處於同一級別，即它們是兄弟。

來源

2013-02-04 09:30:40

我想訪問當前顯示的div。。and the who who's link that clicked ..然後隱藏顯示的div ...可以請你詳細說明...我知道很多javascript $（this）將如何引用顯示的div ... ？ – user2039087

這將如何指在顯示屏上的div ..可以請解釋..讓它有點難以理解... 我瞭解其餘的有關使用類.. – user2039087

我不完全確定它是什麼你是否想要實現，但如果你需要跟蹤顯示的不是被點擊的div，可以嘗試使用addClass（）/ removeClass（）來跟蹤div。嘗試更詳細地解釋給我，我會嘗試幫助。我已經爲你+1了，所以你現在有足夠的代表回覆+1。 –

看起來像你需要on（）函數。這可能等來實現：

jQuery.yourCallback = function() { 
    //this here is object, on which triggered event 
    //your code may be below 
    jQuery(".currentactivediv").removeClass(".currentdiv").hide(); 
    jQuery(this).addClass(".currentdiv").show(); 
} 
jQuery(".yourdivs").on("click",jQuery.yourCallback);

如果你想它的鏈接工作，你需要找到在DOM所需的div，你使用jQuery（這一點）。

工作原理：div顯示時 - 腳本將calss.currentactivediv指定給此div。當其他div顯示 - 腳本關閉當前div時，從中刪除.currentactivediv類並將此類指定給新div，顯示內容。

來源

2013-02-04 09:28:41 Xazzzi

我想要訪問當前正在展示的div ......以及我點擊鏈接的人......然後隱藏展示的div ...請你詳細說明...我知道很多javascript – user2039087

嘗試添加一個類到當前div當你處理點擊事件從鏈接。代碼將如下所示：jQuery（「。currentactivediv」）。removeClass（「。currentdiv」）。hide（）; 。jQuery的（「newdiv 」）addClass（「 currentdiv。」）顯示（）; – Xazzzi

但我將不得不使用其'id'訪問當前活動的div。我想知道是否有一種方法可以使用通用函數來做到這一點。 – user2039087

你可以添加一個類到你的div，然後做這樣的事情。這樣你就不必寫30個功能

function changeImg(id) { 
    $('.your-divs').stop(true, true).fadeOut({ duration: slideDuration, queue: false }); 
    $('#change_content'+id).stop(true, true).fadeIn({ duration: slideDuration, queue: false }); 
}

來源

2013-02-04 09:30:11 romainberger

JavaScript點擊更改整個div

回答

相關問題