Javascript 如何使readmore按钮在文章第一段之后显示图像和h3标记

您好-我已经能够使用.readmore按钮来显示段落标记show。不幸的是，当我点击按钮时，h3标签和图像没有显示出来。请帮助我，使每一篇文章在我的页面上看起来不长。请在这里查看完整代码-

HTML:

---

好的，有几件事需要解决

1应该只有一个节点具有给定的id属性。您有多个id为的节点，单击时显示此节点。您需要删除额外的id属性，以便只有一个节点的id=单击时显示。或者，如果您遵循我的示例，您可以删除所有id属性

2没有图像标签。我会把这个加在你想要的地方。我看到你在Amarilio课上使用了本节的背景。如果它与其他附加内容一起显示和隐藏，这也会起作用

3您的javascript看起来像是粘贴了两次。您需要删除第二个副本

4您的跨距可以替换为div。完成此操作后，可以删除style=display:block；属性几乎从来都不是一个好主意，使跨度一个街区。相反，只需使用div元素

一旦这些都完成了，我们就可以开始修复代码了。看起来您混淆了ID和类的角色。我会从每个id='show-this-on-click'的节点中删除id属性，并在具有该id的节点上添加一个show-this-on-click类。这意味着您需要更改javascript，以便带有$'show-this-on-click'的行变为$'

在readless类的click处理程序中，有另一个readmore类处理程序。这是可以删除的

在代码中，有两个带有amarillo类的节元素。看起来这就是您打算添加图像的方式。我会删除这些，并添加一个img标签。这样，与img标记匹配的代码将有一个img来执行操作。在我的示例中，我删除了作用于所有img元素的代码，而是作用于具有特定类的所有元素

---

您可以看到我对代码的修改。

单击显示此内容可能是一个类。ID用于唯一标识每个元素，因此页面上每个ID只能有一个元素。我没有你的照片，但这是一支有readmore和readless按钮的笔：嗨，丹，刚刚看到你的回答。非常感谢您花时间查看我的代码并进行调整。我将作出建议的修改，使每个职位看起来更好。再次感谢大家！！！！不客气。如果您觉得有用，请将我的答案标记为您的。Hi Dan，一切都很好，但当我尝试在同一页面中添加另一篇文章/帖子，并单击“阅读更多”时，两篇文章同时打开。有没有办法让每个“阅读更多”按钮单独打开？添加更多的文章会使问题变得更加复杂。您是否会添加一些服务器端web框架（如Ruby或Django）中的文章？我更新了，但是你可能应该玩一下原版，直到你理解它是如何工作的。这正是我需要的。我是java脚本新手，所以我需要开始学习很多东西，而且您的代码非常完美。我在一个页面上添加文章/帖子，回答你的问题，不，我没有使用ruby或django。不确定我是否最终会更改它，但现在代码工作得非常完美！再次感谢

<section id="main">
        <div class="container">
            <section id="posts">
                <article class="post">

                     <section class="primavera">
                    <div class="wrapper">
                <!-- image top -->


                        </div>
                    </section>

                    <h1 >Lorem Ipsum</h1>
                    <h2 class="bold">Lorem Ipsum</h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
                    <span class="readmore" style="display: block;"><a href="#">Read more &gt;</a></span>
                     <p class="hide" id="show-this-on-click" >remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

                     <h3 class="hide" id="show-this-on-click" >NEED TO HAVE IT SHOW</h3>



                     <section class="amarillo hide" id="show-this-on-click" >
                        <div class="wrapper">
                    <!-- image top -->


                        </div>
                    </section>


                    <span class="readless hide" style="display: none;"><a href="#">Read less &gt;</a></span>

                </article>
            </section>
        </div>
    </section>