jQuery的：讓相同的div出現

林在這樣的場景： http://jsfiddle.net/HXGrY/jQuery的：讓相同的div出現

我希望能夠點擊我與編號附加青色，並且使與ID＃TODO青色出現。和所有其他人一樣。

有人可以幫助我嗎？

我想這些

<img src="img/cyan.png" width="45px" class="hidden" id="todo-cyan"/> 
<img src="img/magenta.png" width="45px" class="hidden" id="todo-magenta"/> 
<img src="img/yellow.png" width="45px" class="hidden" id="todo-yellow"/> 
<img src="img/black.png" width="45px" class="hidden" id="todo-black"/>

顯示/了slideDown點擊下面他們IMG時：

<img src="img/cyan.png" width="60px" height="60px" id="add-cyan"/> 
<img src="img/magenta.png" width="60px" id="add-magenta"/> 
<img src="img/yellow.png" width="60px" id="add-yellow"/> 
<img src="img/black.png" width="60px" id="add-black"/>

來源

2012-12-16 Magnus Kristoffersen

的http：// mattgemmell。com/2008/12/08/what-you-you-tried/ – Ankur

好的，我道歉。但我不知道其中一個是[id^=「add-」]。我設法讓一個按鈕來做，但我很容易看到它將是一個大型的非食用代碼。 –

$('[id^="add-"]').click(function(){ 
    $('#todo-' + this.id.replace('add-', '')).removeClass('hidden'); 
});

理想情況下，你應該使用類，以便將add元素，所以你不必拉扯'[id^="add-"]'特技。

爲了詳細說明，我選擇使用標識開始add-所有元素：

$('[id^="add-"]')

然後添加一個單擊處理了從與相應todo ID的所有元素刪除hidden類：

$('#todo-' + this.id.replace('add-', '')).removeClass('hidden');

來源

2012-12-16 12:57:53

非常感謝！這看起來很容易，但我只是開始學習，所以我感謝你的幫助。你介意對腳本做一個簡短的解釋嗎？這將幫助我重寫它：D –

@MagnusKristoffersen沒關係。你應該看看關於選擇器的一些教程，關於我仍然在發現的jQuery有很多東西。我已經添加了一個解釋。 –

我想學習，很糟糕！我做HTML，CSS和基本的PHP，但只是開始jQuery和JavaScript。我正在使用Codeacademy :) –

Update

實際上，甚至沒有必要定義所有這些圖像t如果你想要做的就是複製點擊的那個。只需clone吧。

的JavaScript

$(function() { 
    $("img.add").click(function() { 
     $("#todobar").empty().append($(this).clone()); 
    }); 
});

CSS

.add { 
    height: 60px; 
    width: 60px; 
}

修改HTML

<div id="todobar"> 
</div> 

<img src="img/cyan.png" class="add" alt="cyan"/> 
<img src="img/magenta.png" class="add" alt="magenta"/> 
<img src="img/yellow.png" class="add" alt="yellow"/> 
<img src="img/black.png" class="add" alt="black"/>

jsFiddle Demo

有用的jQuery方法來研究：.click() method,jQuery .data() method,jQuery .show() method,jQuery .toggle() method。 jQuery文檔相當驚人，並且這些方法的命名非常直觀。嘗試並保持您的HTML規範：從HTML5起，有一個用於向標記添加數據的數據屬性。也看看不同種類的selectors。我已使用下面的class selector（'.add'）和id selector（'#todo-cyan'）。

的JavaScript

$(function() { 
    $("img.add").click(function() { 
     var col = $(this).data("color"); 
     $("#todo-" + col).toggle(); 
    }); 
});

CSS

.hidden { 
    display: none; 
    width: 45px; 
} 

.add { 
    height: 60px; 
    width: 60px; 
}

修改HTML

<div id="todobar"> 
    <img src="img/cyan.png" class="hidden" id="todo-cyan"/> 
    <img src="img/magenta.png" class="hidden" id="todo-magenta"/> 
    <img src="img/yellow.png" class="hidden" id="todo-yellow"/> 
    <img src="img/black.png" class="hidden" id="todo-black"/> 
</div> 

<img src="img/cyan.png" class="add" data-color="cyan" alt="cyan"/> 
<img src="img/magenta.png" class="add" data-color="magenta" alt="magenta"/> 
<img src="img/yellow.png" class="add" data-color="yellow" alt="yellow"/> 
<img src="img/black.png" class="add" data-color="black" alt="black"/>

來源

2012-12-16 13:26:46 nbrooks

哇哇謝謝，真的很好！ –

@magnus沒問題！其實，我只是添加了一個更短的方式來做到這一點:) – nbrooks

嘿，我也有另一組，與數據data-paper =「a3-90」，我如何實現這一點？ –

jQuery的：讓相同的div出現

回答

相關問題