Question

我想寻求你帮助解决这个问题。我想在点击该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>

请帮我解决此问题。

非常感谢。

Answer 1

没有理由为所有内容提供单独的类和ID。我会在所有50个项目中添加一个公共类来描述它所持有的内容。然后，我会这样做：

$('.common-class a').on('click', function(e){
  e.preventDefault();
  $(this).closest('.common-class').find('.more').slideToggle();
});

.find('.more')只会在您点击的.more链接中找到.common-class div。

这是一个简短的演示：http://jsbin.com/alijak/1/edit

Answer 2

您不需要使用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或50个类名。

虽然在大多数情况下自动高度可能比固定500更好，除非你完全知道你有多少东西。

jQuery显示有关click的更多详细信息

2 个答案: