[英]display block with event target id
I'm try to display an item inside a list that has a class which is exactly the same ID on the other list. 我尝试在列表中显示一个项目,该项目的类与另一个列表上的ID完全相同。 This would be activated when I click on the other list then it will find a match class on the other list then display it.
当我单击另一个列表时,它将被激活,然后它将在另一个列表中找到一个匹配类,然后显示它。
Here is the code I'm using basically the first list is in display:none;
这是我正在使用的代码,基本上第一个列表在
display:none;
List 2 is my menu on which in the list 1 would you like to display. 列表2是我要在列表1中显示的菜单。
The first list should only have one visible item at a time. 第一个列表一次只能包含一个可见项。
HTML 的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>
SCRIPT: 脚本:
$("#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: CSS:
#gallery-container li p {display:none;}
It's
bad bad to use the same
id
in one
HTML
document.
在一个
HTML
文档中使用相同的
id
是
很不好的 。
Never do this.
永远不要这样做。
Nobody likes that,
jQuery
doesn't like that.
没人喜欢,
jQuery
不喜欢。
I don't like it.
我不喜欢
Try using a class or a data
property. 尝试使用类或
data
属性。
But.. scratch that.. you are not really trying to do that. 但是..从头开始..您并不是真的想要这样做。 But still.. it's better to use a
data
property :) 但是仍然..最好使用
data
属性:)
Anyways, to accomplish this with a data
property, you can do something like this: 无论如何,要使用
data
属性完成此操作,您可以执行以下操作:
html 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 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);
});
});
$('#gallery-list li').click(function() {
var targeeet = $(this).attr('id');
$('.' + targeeet).children().css('display', 'block');
});
Try this. 尝试这个。
If you want to fetch the id of the list you clicked: 如果要获取单击的列表的ID,请执行以下操作:
$("#gallery-list li").on("click", function() {
alert($(this).attr("id"))
$("#gallery-container li .wc-gallery").css("display", "none");
});
All you need is : 所有你需要的是 :
$('#gallery-list li').click(function() {
var target = $(this).attr('id');
$("#gallery-container li").hide();
$("#gallery-container li."+target).css('display', 'block');
});
Check the example below : 检查以下示例:
$('#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.