1

我想寻求您的帮助来解决这个问题。单击该 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>

请帮我解决这个问题。

非常感谢。

4

2 回答 2

2

没有理由为每件事都设置单独的类和 ID。我会在所有 50 个项目中添加一个通用类来描述它所持有的内容。然后我会这样处理它：

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

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

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

于 2013-07-21T15:19:07.227 回答
1

您不需要使用 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从 each中获取适当的信息.clk，无需 ID 或 50 个类名。

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

于 2013-07-21T15:15:32.157 回答