1

我在这种情况下：http: //jsfiddle.net/HXGrY/

我希望能够单击带有 ID #add-cyan 的我，并显示带有 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"/>

单击下方的 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"/>
4

2 回答 2

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

理想情况下，您应该使用类来对add元素进行分组，这样您就不必进行'[id^="add-"]'特技了。

为了详细说明，我选择了 ID 以以下开头的所有元素add-：

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

hidden然后添加一个单击处理程序，该处理程序从具有相应todoID的所有元素中删除该类：

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

更新

实际上，如果您要做的只是复制单击的图像，甚至不需要将所有这些图像定义两次。只需克隆它。

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 文档非常棒，方法的命名也相当直观。尽量保持您的 HTML 规范：从 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 回答