我想寻求您的帮助来解决这个问题。单击该div中的链接后,我想显示该div中的更多详细信息。但是,单个页面中将超过50个div。我无法为每个div和可点击的链接提供ID。有什么我们可以实现的吗?
这是我尝试过的。
<script type="text/javascript">
$(document).ready (function(){
$('#clk').click(function(e){
$('.1').css({'height':'500px', 'background-color': '#ffbbbb'} );
$(this).hide ();
e.preventDefault();
});
});
</script>
clk是可点击链接的ID。.1是div的类。
如前所述,按照我所做的事情,我必须使用50个id和50个类
这是该部分的HTML
<div class="1">
<ul>
<li><img src="images/thumb/someimage.jpg"></li>
<li><h2>Title Text </h2></li>
<li><h3>Summary</h3></li>
<li><p> para goes here. <a class="clk" href="#">Click</a></p>
</li></ul>
</div>
请帮助我解决此问题。
非常感谢。
您不需要使用ID来查找内容,这不是唯一的方法。使事情变得相对。使用closest
,next
等等,来发现从你唱首歌你的淋浴。(如果您也显示了HTML结构,这将是一个更好的答案。)
编辑:好的,终于明白了你的意思。阅读理解对我而言是失败的。所以,首先,让我们重命名.1
为一个明智的名称,例如... .expandable
:
<div class="expandable">
<ul>
<li><img src="images/thumb/someimage.jpg"></li>
<li><h2>Title Text </h2></li>
<li><h3>Summary</h3></li>
<li><p> para goes here. <a class="clk" href="#">Click</a></p>
</li></ul>
</div>
您可以这样做:
$('.clk').click(function() {
e.preventDefault();
$(this).closest('.expandable').css({'height':'500px', 'background-color': '#ffbbbb'} );
$(this).hide();
e.preventDefault();
});
因此,.closest
从当前元素开始,找到最匹配的祖先。这样,您就可以.expandable
从每个.clk
ID中获取合适的ID,而无需ID或50个类名。
尽管在大多数情况下具有自动高度可能会比固定500高更好,除非您完全确切地知道自己有多少东西。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句