jQuery的顯示/隱藏W /多DIV ID的

CODE：jQuery的顯示/隱藏W /多DIV ID的

$(document).ready(function() { 

    $('.toggle').hide(); 

    $('.show').click(function(){ 

     $('.toggle').toggle('slow'); 

     $(this).attr('src','images/checkmark2.jpg'); 

    },function(){ 

     $('.toggle').toggle('slow'); 

     $(this).attr('src', 'images/checkmark1.jpg'); 

     return false; 
    }); 
});

HTML：

<img class="show" src="images/checkmark1.jpg"/>Header Text

隱藏文字是在一個div類「開關」，當你點擊checkmark1待觀察.jpg圖片。使用多個「切換」div類，它們都會一次性擴展。

當「切換」設置爲ID＃在腳本和HTML，他們分別擴大（因爲我是怎麼想），但你不能在整個使用相同的DIV ID＃名稱。那麼我將如何更改代碼以使用多個切換DIV ID;或者使用不能一次性擴展的「切換」類？

這裏是直接鏈接到我的代碼。 http://www.flipflopmedia.com/test/ToggleTEST_html.txt 當我嘗試插入它，它被渲染和不顯示，這樣你可以看到它。是的，我正在使用的代碼鍵「輸入代碼在這裏」來應用它，不工作！

來源

2010-01-17 flipflopmedia

安置自己的HTML一個更好的答案。 – Sampson 2010-01-17 19:12:57

抱歉，它不會讓我:(我有下面的示例頁面，但我不得不'回答我自己的問題'，因爲我給每個人的回覆有太多字符。顯然，我沒有得到這個論壇，並且比我做jQuery 。啤酒時間 – flipflopmedia 2010-01-17 22:04:42

flipflopmedia：！。！。這是** **不是一個論壇，如果你有更新，你需要編輯你的問題 – Sampson 2010-01-18 13:36:45

既然你沒有提供任何HTML工作從，一世與腳本作品

HTML

<img class="show" src="images/checkmark1.jpg" /><span>Header Text 1</span> 
<div class="toggle">This is some hidden text #1</div> 

<img class="show" src="images/checkmark1.jpg" /><span>Header Text 2</span> 
<div class="toggle">This is some hidden text #2</div>

腳本把一些在一起（更新了您的HTML工作）

$(document).ready(function(){ 
$('.toggle').hide(); 
$('.show').click(function(){ 
    var t = $(this); 
    // toggle hidden div 
    t.next().next().toggle('slow', function(){ 
    // determine which image to use if hidden div is hidden after the toggling is done 
    var imgsrc = ($(this).is(':hidden')) ? 'images/checkmark1.jpg' : 'images/checkmark2.jpg'; 
    // update image src 
    t.attr('src', imgsrc); 
    }); 
}) 
})

來源

2010-01-17 20:39:13 Mottie

完全複製這一點，我得到完全相同的結果，因爲我已經有了。點擊單個圖像時，它們都會展開/收縮。 – flipflopmedia 2010-01-18 12:34:01

我不知道你在做什麼有什麼不同，但我在這裏發佈了我的腳本演示（http://pastebin.me/7c6962d7e70c49f97237cd465e26fb09），讓你看到它的工作。 – Mottie 2010-01-18 18:38:05

我更新了腳本以使用您提供的HTML。基本上，我沒有使用div封裝每個塊。 – Mottie 2010-01-19 12:06:49

「點擊」功能只允許添加一個功能（點擊選定元素時觸發的功能）。但是你傳遞了兩個。您可能想使用「切換」功能。看到這個問題的更多信息：

jQuery Toggle State

來源

2010-01-17 19:11:44

切換爲原來的用法，我改成了點擊，因爲它是在一個類似的腳本中使用。無論哪種方式都沒有區別。同樣的結果。 – flipflopmedia 2010-01-18 12:23:12

同時使用這兩個ID和類：

<p id="myP1" class="toggle">Hello World</p>

當你需要專門處理：

$("#myP1").toggle();

當你想與其他處理：

$(".toggle").hide();

來源

2010-01-17 19:12:09 Sampson

試過了，沒有工作。也許我沒有正確應用，我會有10個以上的隱藏div，需要特別調用，旁邊的圖片需要被調用，我在腳本中插入這行代碼給每個人一個唯一的ID，然後相應地更新代碼？我在第二篇文章中有前頁以上。 – flipflopmedia 2010-01-18 12:31:40

您需要向我們展示您的HTML。 – Sampson 2010-01-18 13:36:04

它不讓我添加代碼。我有例如網頁瀏覽： http://www.flipflopmedia.com/test/ToggleTEST.html http://www.flipflopmedia.com/test/ToggleTEST2.html – flipflopmedia 2010-01-18 14:00:41

-1

問題就出在這裏：當然

$('.toggle').toggle('slow');

這段代碼將切換所有class="toggle" HTML元素。

根據您的HTML結構，做這樣的事情，而不是：

$(function() { 
$('.toggle').hide(); 
$('.show').click(function() { 
    $(this).next('.toggle').toggle('slow'); 
    $(this).attr('src', 'images/checkmark2.jpg'); 
    return false; 
}, function() { 
    $(this).next('.toggle').toggle('slow'); 
    $(this).attr('src', 'images/checkmark1.jpg'); 
    return false; 
}); 
});

來源

2010-01-17 19:12:11

完全複製這個，現在只有圖像改變一次，但不能恢復到原始狀態;和div（none）展開。 – flipflopmedia 2010-01-18 12:42:26

你希望能夠得到id爲元素（一個或多個）從被點擊的元素的屬性進行切換。換句話說，完全基於被單擊元素屬性中包含的信息，您可以構造元素的id（和/或類）以進行切換。

可能將元素的id與onclick處理程序關聯到要切換的元素的id。例如，如果你點擊使用id =「checkmark1」的IMG，使被切換元素具有ID =「checkmark1_content」，那麼你的點擊處理程序可以是：

$('#' + this.id + '_content').toggle();

類將用於切換超過一個（或幾個）元素：

$('.' + this.id + '_content').toggle();

基於在下面的意見提供的測試情況，這裏是解決方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title> 
     Toggle Test 
    </title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    $(document).ready(function() { 
     $('.toggle').hide(); 
     $('img').attr('src','images/checkmark1.jpg'); 
     $('.toggler').click(function() { 
      var target = this.id + '_content'; 
      // Use ID-selectors to toggle a single element. 
      $('#' + target).toggle(); 
      // Use class-selectors to toggle groups of elements. 
      $('.' + target).toggle(); 
      $('.toggle.always').toggle(); 
     }); 
     $('#toggle_everything').click(function() { $('.toggle').toggle(); }); 
    }); 
    //]]></script> 
    </head> 
    <body> 
    <div class="toggler" id="toggle1"><img/>Toggle 1</div> 
    <div class="toggler" id="toggle2"><img/>Toggle 2</div> 
    <div class="toggler" id="toggle3"><img/>Toggle 3</div> 
    <div id="toggle_everything"><img/>Toggle Everything</div> 
    <hr/> 
    <div class="toggle" id="toggle1_content">only toggle1</div> 
    <div class="toggle" id="toggle2_content">only toggle2</div> 
    <div class="toggle" id="toggle3_content">only toggle3</div> 
    <div class="toggle always">always toggled</div> 
    <div class="toggle toggle1_content toggle2_content">toggle1 and toggle2</div> 
    <div class="toggle toggle1_content toggle3_content">toggle1 and toggle3</div> 
    <div class="toggle toggle2_content toggle3_content">toggle2 and toggle3</div> 
    <div class="toggle toggle1_content toggle2_content toggle3_content">toggle1, toggle2 and toggle3</div> 
    </body> 
</html>

來源

2010-01-17 19:21:35 nicerobot

這是有道理的，但我不能正確地將它應用到腳本，使其工作！我一定做錯了什麼。這是我正在尋找的。腳本中的一條簡單線條，它會告訴它XXX是否附加到id名稱，然後展開/隱藏該名稱。你能幫我解決一些問題嗎？我的測試頁面在這裏：http://www.flipflopmedia.com/test/ToggleTEST.html 這些是原始頁面，沒有任何建議應用。謝謝，特雷西 – flipflopmedia 2010-01-18 12:53:23

答案編輯... – nicerobot 2010-01-18 15:25:22

jQuery的顯示/隱藏W /多DIV ID的

回答

相關問題