显示具有事件目标 ID 的块
display block with event target id
>我尝试在列表中显示一个项目,该列表的类在另一个列表中具有完全相同的ID。当我单击另一个列表时,这将被激活,然后它会在另一个列表上找到一个匹配类并显示它。
这是我使用的代码,基本上第一个列表是display:none;
列表 2 是我的菜单,您希望在列表 1 中显示该菜单。
第一个列表一次只能有一个可见项目。
小提琴来了
.HTML
<div id="gallery-container">
<li class="1723"><p>
123
</p></li>
<li class="1725"><p>
456
</p></li>
</div>
<ul id="gallery-list">
<li id="1723">
<strong>qwertyuiop</strong>
</li>
<li id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>
脚本:
$("#gallery-list li").click(function() {
alert(event.target.id);
$("#gallery-container li .wc-gallery").css("display", "none");
});
window.onload = function () {
$("#gallery-container li p").css("display", "none");
}
.CSS:
#gallery-container li p {display:none;}
在一个
尝试使用类或HTML
文档中使用相同的id
是不好的。永远不要这样做。没有人喜欢这样,jQuery
不喜欢这样。我不喜欢。data
属性。
但是......抓挠那个......你并不是真的想这样做。但是..最好使用data
属性:)
无论如何,要使用 data
属性实现此目的,您可以执行以下操作:
.html
<div id="gallery-container">
<li data-id="1723">
<p>
123
</p>
</li>
<li data-id="1725">
<p>
456
</p>
</li>
</div>
<ul id="gallery-list">
<li data-id="1723">
<strong>qwertyuiop</strong>
</li>
<li data-id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>
.js
$("#gallery-list li").click(function() {
var id = $(this).data('id');
$("#gallery-container").find('li').each(function() {
$(this).find('p').toggle($(this).data('id') === id);
});
});
斯菲德尔
如果要获取您单击的列表的 id:
$("#gallery-list li").on("click", function() {
alert($(this).attr("id"))
$("#gallery-container li .wc-gallery").css("display", "none");
});
$('#gallery-list li').click(function() {
var targeeet = $(this).attr('id');
$('.' + targeeet).children().css('display', 'block');
});
试试这个。
您所需要的只是:
$('#gallery-list li').click(function() {
var target = $(this).attr('id');
$("#gallery-container li").hide();
$("#gallery-container li."+target).css('display', 'block');
});
检查以下示例:
$('#gallery-list li').click(function() {
var target = $(this).attr('id');
$("#gallery-container li").hide();
$("#gallery-container li."+target).css('display', 'block');
});
#gallery-container li{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="gallery-container">
<li class="1723">
<p>
123
</p>
</li>
<li class="1725">
<p>
456
</p>
</li>
</div>
<ul id="gallery-list">
<li id="1723">
<strong>qwertyuiop</strong>
</li>
<li id="1725">
<strong>asdfghjkl</strong>
</li>
</ul>
你想做手风琴吗?
$("#gallery-container li").hide();
$("#gallery-list li").click(function() {
$("#gallery-container li").hide();
$("#gallery-container li."+this.id).show();
});
js小提琴
相关文章:
- 显示某个用户ID的某个标签的30张Instagram图片
- 希望日期开始结束于while循环中的一个房间id的一个数组
- Html地图对象-点击地图获取id的一部分
- 禁用Tab键以进行具有特定Div ID的输入
- 如何检查名为id的变量属性
- Javascript获取具有不同id的文件数's来自没有多个属性的文件输入元素
- 将字符串分组为n个字符的块,并应用替换
- 将类添加到没有id的元素中
- 不使用id的javascript中的onfocus函数
- 更改具有相同id的输入类型的所有值
- 使用SeleniumWebdriver(带有Java)测试没有ID的视频
- 表单提交问题,如何在我的URL末尾获得ID的值
- 取出图像标签alt:丢失"没有alt-id的图像标签是优选的并且不显示丢失的“;
- 如何获取具有相同id的多个输入值
- 使用getElementById设置动态ID的输入字段的样式
- 选择包含相同id的所有元素
- 如何查找具有该ID的元素是否存在
- 筛选具有相同id的多个数组中的对象
- 多个具有相同ID的svg
- 显示具有事件目标 ID 的块