Question

我已经阅读了之前有关使用jQuery单独显示/隐藏多个元素的问题，但我无法修改适用于这些用户的代码，以便它适用于我的情况。

以下是细分：

Page将有多篇博文
每篇博文都将默认使用“显示更多”链接显示帖子摘录
点击单个帖子的“显示更多”链接时，应隐藏帖子摘录，并且底部应显示“完整帖子”内容，并显示“显示更少”链接（仅应出现在单个帖子实例上，因此我已经设置了我的代码以包含自定义ID，但也许我把它放在错误的位置？）
当点击单个帖子的“显示更少”链接时，应隐藏完整帖子内容，并且应该重新显示帖子摘录，并在底部显示“显示更多”链接（同样，应仅在单个帖子实例上发生），不会同时影响所有帖子）

问题：以下代码的实际结果最终会执行以下操作：

在点击“显示更多”链接时，按预期交换完整内容的摘要后
单击“显示更少”链接时，不会将完整内容替换为摘录后

知道为什么吗？我对jQuery不太满意;当我讨论现有的代码示例时，我倾向于学习代码，所以我仍然在努力去理解导致这种行为而不是预期行为的原因。

post索引的实际HTML使用了很多CMS模板特定的代码，如果我包含它可能没有意义，所以我用生成的内容的最小值替换它。我已经为我的测试目的添加了我设置的jQuery和HTML ...

<html>
 <head>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
<body>

    <script type="text/javascript">
    $(document).ready(function(){
     $('#full-3434').hide();
      $('.show-more').click(function () {
            var id = $(this).attr('id');
        $('#excerpt-' + id).hide(); 
        $('#full-' + id).show();
     });
      $('.show-less').click(function () {
            var id = $(this).attr('id');
        $('#full-' + id).hide(); 
        $('#excerpt-' + id).show();
     });
    });
    </script>

<div class="entry-body">
    <div class="excerpt" id="excerpt-3434">
        <p>Post Excerpt Here. This will disappear when the "Show More" 
        link is clicked and the Full Post Content will display instead.</p>
        <p><a href="#" class="show-more" id="3434">Show More</a></p>
    </div>

    <div class="full" id="full-3434">
        <p>Full Post Content Here. This will be hidden by default. When 
        the "Show Less" link is clicked, the Full Post Content will 
        disappear and Post Excerpt will reappear.</p>

        <p><a href="#" class="show-less" id="3434">Show Less</a></p>
    </div>
</div>

</body>
</html>

任何和所有帮助表示赞赏！：d

Answer 1

HTML中的基本内容之一是：您应该只有一个具有相同ID的元素。

你的问题的解决方案可能是这个html：

<div id="3434" class="entry-body">
<div class="excerpt">
    <p>Post Excerpt Here. This will disappear when the "Show More" 
    link is clicked and the Full Post Content will display instead.</p>
    <p><a href="#" class="show-more">Show More</a></p>
</div>

<div class="full">
    <p>Full Post Content Here. This will be hidden by default. When 
    the "Show Less" link is clicked, the Full Post Content will 
    disappear and Post Excerpt will reappear.</p>

    <p><a href="#" class="show-less">Show Less</a></p>
</div>
</div>

和函数的这个主体

 $('#3434 .full').hide();
  $('.show-more').click(function () {
        var id = $(this).closest('.entry-body').attr('id');
    $('#' + id + ' .excerpt').hide(); 
    $('#' + id + ' .full').show();
 });
  $('.show-less').click(function () {
        var id = $(this).closest('.entry-body').attr('id');
    $('#' + id + ' .full').hide(); 
    $('#' + id + ' .excerpt').show();
 });

但这仍然很笨拙。你可以从css中获得更多的力量和这种风格：

.entry-body .more .full, .entry-body .less .excerpt { display: block }
.entry-body .more .excerpt, .entry-body .less .full { display: none }

你可以拥有这个功能的主体：

 $('#3434').addClass('less');
  $('.show-more').click(function () {
        var post = $(this).closest('.entry-body');
    post.removeClass('less'); 
    post.addClass('more');
 });
  $('.show-less').click(function () {
        var post = $(this).closest('.entry-body');
    post.removeClass('more'); 
    post.addClass('less');
 });

这可以通过简单地交换类来完成所有更改，并允许您在css中的帖子的两个状态之间进行更多更改，而不仅仅是“显示”/“隐藏”。

编辑：

如果您将$('#3434').addClass('less')与$('.entry-body').addClass('less')交换，那么您可以使用一般的自包含代码，该代码不会使用任何丑陋的ID，并且适用于页面上的任意数量的帖子。

单独交换显示/隐藏多个元素的行为

1 个答案: