在個人div上使用jQuery切換

我正在嘗試使用+和 - 框來顯示和隱藏div來創建切換效果。而例如http://theodin.co.uk/tools/tutorials/jqueryTutorial/index.html 在個人div上使用jQuery切換

這是我使用

$(function(){ 
     $('.block').hide(); 
      $('#show').toggle(function(){ 
        $('.block').show(); 
        $(this).attr("src","images/minus.jpg"); 
      },function(){ 
       $('.block').hide(); 
       $(this).attr("src", "images/plus.jpg"); 
      }); 
    });

的HTML腳本

<div id="show"> Open <img id="show" src="images/plus.jpg"/> </div> 
    <div class="block"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    </div>

它正常工作與一個DIV但我有多重，當我點擊一個，他們都表演。有沒有辦法使用我擁有的代碼單獨切換它們？

來源

2010-11-09 user499630

更改show ID到class這樣的：

<div class="show"> Open <img src="images/plus.jpg" /> </div> 
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 

<div class="show"> Open <img src="images/plus.jpg" /> </div> 
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

然後jQuery的變爲：

$('.show').toggle(function(){ 
    $(this).next('.block').show(); 
    $(this).children("img").attr("src","images/minus.jpg"); 
},function(){ 
    $(this).next('.block').hide(); 
    $(this).children("img").attr("src", "images/plus.jpg"); 
});

Here's an example.

來源

2010-11-09 23:57:04

謝謝！這是有效的！你知道jQuery是否允許隱藏（）塊的div，例如，一個點擊塊外的任何地方或切換另一個？ – user499630 2010-11-10 19:06:16

btw，我更新了實際圖片網址的代碼，但圖片不變 – user499630 2010-11-10 19:37:52

我的不好。我沒有測試圖像。我們將使用'children（「img」）'來做到這一點。我已經更新了上面的示例以反映它。 – 2010-11-11 02:08:46

您正在更改#show元素的src，因爲您應該將其更改爲子元素<img>。

$(function() { 
    $('.block').hide(); 
    $('#show').toggle(function(){ 
     $('.block').show(); 
     $(this).children('img').attr("src","images/minus.jpg"); 
    },function(){ 
     $('.block').hide(); 
     $(this).children('img').attr("src", "images/plus.jpg"); 
    }); 
});

這使用.children()讓孩子<img>元素，所以你可以改變它的來源。

此外，<img>與其父母具有相同的ID。這是不允許的。 ID必須是唯一的。

來源

2010-11-09 23:50:58 user113716

此外，div有和「秀」的ID，以及作爲img。看，今晚的全體人員！ – karim79 2010-11-09 23:52:03

@ karim79 - 的確如此。剛剛完成更新。：o） – user113716 2010-11-09 23:52:45

謝謝你的代碼！我嘗試過，但由於某種原因我有同樣的問題。也許我的HTML是錯誤的。但是，Gert提供的代碼似乎工作。 – user499630 2010-11-10 19:07:41

在個人div上使用jQuery切換

回答

相關問題