在div点击显示所有div与X ID [英] on div click show all divs with X id
问题描述
我希望当我点击其中一个圆圈时，它会显示下一行圆圈。但只能用上选课。这是我的代码：
< table>
< tr>
< td>
< div style =position：relative;类= 罐SELECT1 >
< img src =http://lkimg.zamimg.com/images/guides/ability-marker.pngstyle =vertical-align：middle;类=可选取>
< div class =can-select-text> 1< / div>
< / div>
< / td>
< td>
< div style =position：relative; class =nothing1id =tier1>
< img src =http://lkimg.zamimg.com/images/guides/ability-marker.pngstyle =vertical-align：middle;类= 无 >
< div class =can-select-text> 2< / div>
< / div>
< / td>
< / tr>
< tr>
< td>
< div style =position：relative;类= 罐SELECT1 >
< img src =http://lkimg.zamimg.com/images/guides/ability-marker.pngstyle =vertical-align：middle;类=可选取>
< div class =can-select-text> 1< / div>
< / div>
< / td>
< td>
< div style =position：relative; class =nothing1id =tier1>
< img src =http://lkimg.zamimg.com/images/guides/ability-marker.pngstyle =vertical-align：middle;类= 无 >
< div class =can-select-text> 2< / div>
< / div>
< / td>
< / tr>
< / table>
Javascript：
$（'。can-select1'）。click（function（e）{
$（this）.addClass（is-select）;
$（this）.find （'.can-select'）。addClass（is-selected）;
$（this）.children（'。can-select-text'）。addClass（is-select）;
}）;
CSS：
.can-select1 {
cursor：pointer;
不透明度：0.4;
}
.can-select-text {
opacity：0;
位置：绝对;
top：0;
剩下：0;
text-align：center;
width：32px;
font：bold 13px / 32px'Trebuchet Ms';
text-shadow：1px 1px 1px rgba（0，0，0，0.6）;颜色：＃111;
}
.is-selected {
cursor：default;
opacity：1.0;
}
.nothing1 {
cursor：default;
opacity：0;
}
JS小提琴： http://jsfiddle.net/p3Q7Z/7/
<
首先， id s必须是唯一的。
接下来，我添加了这一行：
$（本）.closest（ 'TD'）未来（ 'TD'）找到（ nothing1。 '）removeClass（' nothing1 '）addClass（' 罐选择1' ）。;
这个遍历从按钮开始，直到父节点 td 到下一个兄弟 td ，查找它的 .nothing1 按钮，并使它可点击。
另外，我将点击处理程序行更改为：
<$ （'click'，'。can-select1'，function（e）{
因此，处理程序将在添加和删除类时应用。处理程序仅适用于第一次加载页面时存在的元素。
编辑
修改下列列表中的所有 td ：
$（this）。 （'td'）。nextAll（'td'）。each（function（）{
$（this）.find（'。nothing1'）。removeClass（'nothing1'）。addClass（'can-select1 '）;
}）;
聊天后编辑，这里是重写
使用单选按钮和标签：
< td class =column-0 selectable>
< input type =radioname =column-0id =column-0-row-0>
< label for =column-0-row-0>
< img src =http://lkimg.zamimg.com/images/guides/ability-marker.png>
< div> 1< / div>
< / label>
< / td>
在css中完成所有样式，不需要名称：
td input [type =radio] {
display：none;
}
td input [type =radio] + label {
display：none;
cursor：default;
opacity：0;
职位：亲属;
}
td input [type =radio] + label img {
vertical-align：middle;
}
td input [type =radio] + label div {
position：absolute;
top：0;
剩下：0;
text-align：center;
width：32px;
font：bold 13px / 32px'Trebuchet Ms';
text-shadow：1px 1px 1px rgba（0，0，0，0.6）;
颜色：＃111;
}
td.selectable input [type =radio] + label {
display：block;
光标：指针;
不透明度：0.4;
}
td.selectable input [type =radio]：checked + label {
cursor：pointer;
opacity：1.0;
}
I want that when I click on one of the circle it shows the next row of circles. But can only have on with is-selected class. This is the code I have:
<table>
<tr>
<td>
<div style="position: relative;" class="can-select1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
<div class="can-select-text">1</div>
</div>
</td>
<td>
<div style="position: relative;" class="nothing1" id="tier1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
<div class="can-select-text">2</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="position: relative;" class="can-select1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="can-select">
<div class="can-select-text">1</div>
</div>
</td>
<td>
<div style="position: relative;" class="nothing1" id="tier1">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png" style="vertical-align: middle;" class="nothing">
<div class="can-select-text">2</div>
</div>
</td>
</tr>
</table>
Javascript:
$('.can-select1').click(function(e){
$(this).addClass("is-selected");
$(this).find('.can-select').addClass("is-selected");
$(this).children('.can-select-text').addClass("is-selected");
});
CSS:
.can-select1 {
cursor:pointer;
opacity:0.4;
}
.can-select-text{
opacity: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 32px;
font: bold 13px/32px 'Trebuchet Ms';
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); color: #111;
}
.is-selected {
cursor:default;
opacity:1.0;
}
.nothing1{
cursor:default;
opacity:0;
}
JS fiddle: http://jsfiddle.net/p3Q7Z/7/
It's hard to tell what you actually want but this should help:
First, ids must be unique. I removed them.
Next, I added the line:
$(this).closest('td').next('td').find('.nothing1').removeClass('nothing1').addClass('can-select1');
This traverses from the button, up to the parent td, to the next sibling td, looks for its .nothing1 button, and makes it clickable.
Also, I changed the click handler line to:
$('table').on('click','.can-select1',function(e){
So the handler will apply when classes are added and removed. As you had it, the handler will only apply to the elements that existed when the page loaded for the first time.
edit
To modify all next td in the column:
$(this).closest('td').nextAll('td').each(function() {
$(this).find('.nothing1').removeClass('nothing1').addClass('can-select1');
});
edit after chat, here's a re-write
Use radio buttons and labels:
<td class="column-0 selectable">
<input type="radio" name="column-0" id="column-0-row-0">
<label for="column-0-row-0">
<img src="http://lkimg.zamimg.com/images/guides/ability-marker.png">
<div>1</div>
</label>
</td>
Do all the styling in css without names:
td input[type="radio"] {
display: none;
}
td input[type="radio"] + label {
display:none;
cursor:default;
opacity:0;
position: relative;
}
td input[type="radio"] + label img {
vertical-align: middle;
}
td input[type="radio"] + label div {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 32px;
font: bold 13px/32px'Trebuchet Ms';
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
color: #111;
}
td.selectable input[type="radio"] + label {
display:block;
cursor:pointer;
opacity:0.4;
}
td.selectable input[type="radio"]:checked + label {
cursor:pointer;
opacity:1.0;
}
这篇关于在div点击显示所有div与X ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
