首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >简单阅读更多按钮不工作2段

简单阅读更多按钮不工作2段
EN

Stack Overflow用户
提问于 2022-07-19 15:12:01
回答 1查看 29关注 0票数 1

我试图添加2和更多的阅读更多的按钮,以便我的观众可以查看故事或主题之前,下载。因此,我在互联网的帮助下编写了这段代码,但它只工作在第一段,而不是第二段。我甚至不太了解jQuery。提前谢谢。

代码语言:javascript
复制
$(document).ready(function () {
    $("#toggle").click(function () {
        var elem = $("#toggle").text();
        if (elem == "Read More") {
            //Stuff to do when btn is in the read more state
            $("#toggle").text("Read Less");
            $("#text").slideDown();
        } else {
            //Stuff to do when btn is in the read less state
            $("#toggle").text("Read More");
            $("#text").slideUp();
        }
    });
});
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 style="font-family: IMFell">Story:</h4>
            <div>
                <p style="font-size: 18px">
                    In 1986, mobster Tommy Vercetti (voiced by Ray Liotta) is released from prison after serving a fifteen-year sentence for murder. His boss Sonny Forelli (Tom Sizemore), seeking to establish drug operations in the south, sends Tommy to Vice City following his release, to oversee an important drug deal alongside crooked lawyer Ken Rosenberg (William Fichtner).</p>
                    <span id="text" style="display: none; font-size: 18px; color: #000000">However, the deal is ambushed by unknown assailants, with Tommy and Ken barely escaping it. Angered upon hearing the news, Sonny orders Tommy to recover the drugs, alongside the money he gave to him, under threat of consequences. Seeking information, Ken points Tommy towards Colonel Juan Garcia Cortez (Robert Davi), who helped set up the exchange. Expressing regret for the ambush, Cortez promises to find out who masterminded it.<br>
                        <br>While investigating, Tommy meets with several people who offer him help: music producer Kent Paul (Danny Dyer), who maintains connections with the city's criminal underworld; Lance Vance (Philip Michael Thomas), who aided in the deal and lost his brother in the ambush; Texan real estate developer Avery Carrington (Burt Reynolds), who in return enlists Tommy's help with several deals; and drug kingpin Ricardo Diaz (Luis Guzmán), who employs both Tommy and Lance, but treats them as nothing but lackeys. Eventually, Cortez begins voicing his suspicions that Diaz organised the ambush. Upon further investigation, Lance discovers this to be the truth and, against Tommy's advice, tries to kill Diaz, only to get himself captured. After Tommy saves Lance, the pair find themselves forced to kill Diaz before he can retaliate. With Diaz dead, Tommy takes over his assets and, at Avery's suggestion, works to expand his new criminal empire by forcing businesses to pay him protection money and buying out nearly bankrupt companies to use as fronts for illicit operations. At the same time, Tommy provides assistance to several prominent gang leaders in the hopes they will support his expansion, and helps Cortez flee the city with stolen military equipment.<br>
                        <br>Eventually, Sonny discovers that Tommy has gained complete control over Vice City's drug trade without cutting the Forellis in. Enraged at his independence, Sonny sends mobsters to forcefully collect money from Tommy's businesses. In response, Tommy kills Sonny's men and severs his ties with him. Later, learning Sonny is personally coming to Vice City to collect what he believes he is owed, Tommy prepares to pay him tribute with counterfeit money. However, Sonny reveals that he was responsible for Tommy's arrest fifteen years prior, and that Lance has betrayed him and allied himself with the Forellis, having felt inadequate in Tommy's presence since his rise to power. A shootout ensues in Tommy's mansion, during which he prevents the Forellis from stealing his money and murders Lance for his betrayal, before finally killing Sonny in a tense standoff. When Ken arrives to a scene of carnage, Tommy quickly reassures him that everything is now fine, as he has finally established himself as the undisputed crime kingpin of Vice City.
                    </span>
            </div>
            <div class="btn-container">
                <button id="toggle">Read More</button>
            </div>
            <br>
            <h4 style="font-family: IMFell">About:</h4>
            <div>
                <p style="font-size: 18px">Grand Theft Auto: Vice City is a 2002 action-adventure game developed by Rockstar North and published by Rockstar Games. It is the fourth main entry in the Grand Theft Auto series, following 2001's Grand Theft Auto III. Set in 1986 within the fictional Vice City, based on Miami, the single-player story follows mobster Tommy</p>
                    <span id="text" style="display: none; font-size: 18px; color: #000000">Vercetti's rise to power after his release from prison and being caught up in an ambushed drug deal. While seeking out those responsible, he slowly builds an empire by seizing power from other criminal organisations in the city.<br>
                        <br>The game is played from a third-person perspective and its world is navigated on foot or by vehicle. The open world design lets the player freely roam Vice City, consisting of two main islands. The game's plot is based on multiple real-world people and events in Miami such as Cubans, Haitians, and biker gangs, the 1980s crack epidemic, the Mafioso drug lords of Miami, and the dominance of glam metal. The game was also influenced by the film and television of the era, most notably Scarface and Miami Vice. Much of the development work constituted creating the game world to fit the inspiration and time period; the development team conducted extensive field research in Miami while creating the world. The game was released in October 2002 for the PlayStation 2, in May 2003 for Microsoft Windows, and in October 2003 for the Xbox.<br>
                        <br>Upon release, Vice City received critical acclaim, with praise particularly directed at its music, gameplay and open world design. However, the game also generated controversy over its depiction of violence and racial groups, sparking lawsuits and protests. Vice City became the best-selling video game of 2002 and has sold over 17.5 million copies. Considered one of the most significant titles of the sixth generation of video games and one of the greatest video games ever made, it won numerous year-end accolades including Game of the Year awards from several gaming publications. Since its release, the game has received numerous ports to many gaming platforms. An enhanced version was released for mobile platforms in 2012 for the game's tenth anniversary. Its successor, Grand Theft Auto: San Andreas, was released in 2004, and a prequel, Vice City Stories, was released in 2006.
                    </span>
            </div>
            <div class="btn-container">
                <button id="toggle">Read More</button>
            </div>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-19 15:20:26

代码的问题在于在多个元素上重复相同的id。由于id需要是唯一的,所以id的选择只返回第一个元素。

要解决您的问题,请删除id并在元素上使用公共的class属性。在这里,您可以使用DOM遍历方法,例如closest()prev()来针对需要切换的内容。

此外,避免使用style属性将CSS放入HTML中。使用外部样式表,正如我在下面的示例中所做的那样。

代码语言:javascript
复制
jQuery($ => {
  $(".toggle").on('click', e => {
    let $button = $(e.target);
    let $target = $button.closest('.btn-container').prev('div').find('span.text').slideToggle(() => {
      $button.text($target.is(':visible') ? 'Read Less' : 'Read More');
    });
  });
});
代码语言:javascript
复制
h4 {
  font-family: IMFell;
}

p {
  font-size: 18px;
}

span.text {
  display: none;
  font-size: 18px;
  color: #000000;
}
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Story:</h4>
<div>
  <p>
    In 1986, mobster Tommy Vercetti (voiced by Ray Liotta) is released from prison after serving a fifteen-year sentence for murder. His boss Sonny Forelli (Tom Sizemore), seeking to establish drug operations in the south, sends Tommy to Vice City following his release, to oversee an important drug deal alongside crooked lawyer Ken Rosenberg (William Fichtner).
  </p>
  <span class="text">
    However, the deal is ambushed by unknown assailants, with Tommy and Ken barely escaping it. Angered upon hearing the news, Sonny orders Tommy to recover the drugs, alongside the money he gave to him, under threat of consequences. Seeking information, Ken points Tommy towards Colonel Juan Garcia Cortez (Robert Davi), who helped set up the exchange. Expressing regret for the ambush, Cortez promises to find out who masterminded it.<br><br>
    While investigating, Tommy meets with several people who offer him help: music producer Kent Paul (Danny Dyer), who maintains connections with the city's criminal underworld; Lance Vance (Philip Michael Thomas), who aided in the deal and lost his brother in the ambush; Texan real estate developer Avery Carrington (Burt Reynolds), who in return enlists Tommy's help with several deals; and drug kingpin Ricardo Diaz (Luis Guzmán), who employs both Tommy and Lance, but treats them as nothing but lackeys. Eventually, Cortez begins voicing his suspicions that Diaz organised the ambush. Upon further investigation, Lance discovers this to be the truth and, against Tommy's advice, tries to kill Diaz, only to get himself captured. After Tommy saves Lance, the pair find themselves forced to kill Diaz before he can retaliate. With Diaz dead, Tommy takes over his assets and, at Avery's suggestion, works to expand his new criminal empire by forcing businesses to pay him protection money and buying out nearly bankrupt companies to use as fronts for illicit operations. At the same time, Tommy provides assistance to several prominent gang leaders in the hopes they will support his expansion, and helps Cortez flee the city with stolen military equipment.<br><br>
    Eventually, Sonny discovers that Tommy has gained complete control over Vice City's drug trade without cutting the Forellis in. Enraged at his independence, Sonny sends mobsters to forcefully collect money from Tommy's businesses. In response, Tommy kills Sonny's men and severs his ties with him. Later, learning Sonny is personally coming to Vice City to collect what he believes he is owed, Tommy prepares to pay him tribute with counterfeit money. However, Sonny reveals that he was responsible for Tommy's arrest fifteen years prior, and that Lance has betrayed him and allied himself with the Forellis, having felt inadequate in Tommy's presence since his rise to power. A shootout ensues in Tommy's mansion, during which he prevents the Forellis from stealing his money and murders Lance for his betrayal, before finally killing Sonny in a tense standoff. When Ken arrives to a scene of carnage, Tommy quickly reassures him that everything is now fine, as he has finally established himself as the undisputed crime kingpin of Vice City.
  </span>
</div>
<div class="btn-container">
  <button class="toggle">Read More</button>
</div><br>

<h4>About:</h4>
<div>
  <p>
    Grand Theft Auto: Vice City is a 2002 action-adventure game developed by Rockstar North and published by Rockstar Games. It is the fourth main entry in the Grand Theft Auto series, following 2001's Grand Theft Auto III. Set in 1986 within the fictional Vice City, based on Miami, the single-player story follows mobster Tommy
  </p>
  <span class="text">
    Vercetti's rise to power after his release from prison and being caught up in an ambushed drug deal. While seeking out those responsible, he slowly builds an empire by seizing power from other criminal organisations in the city.<br><br>
    The game is played from a third-person perspective and its world is navigated on foot or by vehicle. The open world design lets the player freely roam Vice City, consisting of two main islands. The game's plot is based on multiple real-world people and events in Miami such as Cubans, Haitians, and biker gangs, the 1980s crack epidemic, the Mafioso drug lords of Miami, and the dominance of glam metal. The game was also influenced by the film and television of the era, most notably Scarface and Miami Vice. Much of the development work constituted creating the game world to fit the inspiration and time period; the development team conducted extensive field research in Miami while creating the world. The game was released in October 2002 for the PlayStation 2, in May 2003 for Microsoft Windows, and in October 2003 for the Xbox.<br><br>
    Upon release, Vice City received critical acclaim, with praise particularly directed at its music, gameplay and open world design. However, the game also generated controversy over its depiction of violence and racial groups, sparking lawsuits and protests. Vice City became the best-selling video game of 2002 and has sold over 17.5 million copies. Considered one of the most significant titles of the sixth generation of video games and one of the greatest video games ever made, it won numerous year-end accolades including Game of the Year awards from several gaming publications. Since its release, the game has received numerous ports to many gaming platforms. An enhanced version was released for mobile platforms in 2012 for the game's tenth anniversary. Its successor, Grand Theft Auto: San Andreas, was released in 2004, and a prequel, Vice City Stories, was released in 2006.
  </span>
</div>
<div class="btn-container">
  <button class="toggle">Read More</button>
</div>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73039451

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档