Question

我希望能够使用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时显示/ 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"/>

Answer 1

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

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

详细说明，我选择ID为add-的所有元素：

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

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

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

Answer 2

Update

实际上，甚至没有必要将所有这些图像定义两次，如果您要做的就是复制所点击的图像。只需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"/>

jQuery：出现相同的div

2 个答案: