1

このシナリオのイム: http://jsfiddle.net/HXGrY/

ID #add-cyan の my をクリックして、ID #todo-cyan の を表示できるようにしたいです。そして、他のすべてと同様。

誰かがこれで私を助けることができますか?

これらが欲しい

<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 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"/>
4

2 に答える 2

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

理想的には、クラスを使用して要素をグループ化する必要があるため、スタントaddを引っ張る必要はありません。'[id^="add-"]'

詳しく説明すると、ID が で始まるすべての要素を選択していますadd-。

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

次に、対応するIDhiddenを持つすべての要素からクラスを削除するクリック ハンドラーを追加します。todo

$('#todo-' + this.id.replace('add-', '')).removeClass('hidden');
于 2012-12-16T12:57:53.633 に答える
1

アップデート

実際には、クリックした画像を複製するだけであれば、これらの画像をすべて 2 回定義する必要さえありません。クローンするだけです。

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 デモ

調査に役立つ jQuery メソッド:.click()メソッド、jQuery.data()メソッド、jQuery.show()メソッド、jQuery.toggle()メソッド。jQuery のドキュメントは非常に素晴らしく、メソッドの名前は非常に直感的です。HTML5 では、マークアップにデータを追加するための data- 属性があります。また、さまざまな種類のセレクターも見てください。以下のクラス セレクター'.add'( ) とid セレクター( '#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-16T13:26:46.347 に答える