jQuery在单击时显示更多详细信息

debugcn 发表于 Dev

我想寻求您的帮助来解决这个问题。单击该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从每个.clkID中获取合适的ID，而无需ID或50个类名。

尽管在大多数情况下具有自动高度可能会比固定500高更好，除非您完全确切地知道自己有多少东西。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。