Question

我有一个带有文本/图像的框列表和一个用于显示更多/更少文本的按钮。当我单击项目的另一个按钮时，我所在的框文本关闭，但该文本也没有再次更改为“更多详细信息”。

您可以在https://www.lagaleramagazine.es/

中进行检查

有问题的屏幕截图：我先单击第二项的按钮，然后单击第一项的按钮。框文本关闭，但按钮的文本没有再次更改为“更多详细信息”（详细信息）。

   

 $("document").ready(function(){
    $(".btn1").click(function() {
        if ($.trim($(this).text()) === 'Más detalles') {
          $(this).text('Menos detalles');
        } else {
          $(this).text('Más detalles');
        }
        
        var $p1 = $(this).next(".p1");
        var $p1img = $(this).parents().eq(4).find(".p1-img");
      
        $p1.toggle();
        $p1img.toggle();
      
        $(".p1").not($p1).hide();
        $(".p1-img").not($p1img).hide();
        
      });
});

.p1, .p1-img {
  display: none;
}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="event-56092" class="ect-list-post ect-featured-event  data-parent-post " id=" 56053">
        <div class="ect-list-post-left ">
            <div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/50008823_1936412149789348_6701274349090897920_n-1024x715.jpg');background-size:cover;background-position:center center;">
                <a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
                    <div class="ect-list-date">
                        <div class="ect-date-area default-schedule">
                            <span class="ev-day">25</span>
                            <span class="ev-mo">febrero</span>
                            <span class="ev-yr">2019</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="ect-list-post-right">
            <div class="ect-list-post-right-table">
                <div class="ect-list-description">
                    <h2 class="ect-list-title">
                        <a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="VI Escuelas Deportivas para Mayores" rel="bookmark">VI Escuelas Deportivas para Mayores</a>
                    </h2>
                    <button class="btn1 button-more svg" >Más detalles</button>
                    <div class="p1" style="display: none;">
                        <div class="ect-event-content">
                            <p>Desde el lunes 21 de enero y hasta el martes 18 de junio, todos los socios de los Centros Municipales de Mayores que participan en la XXIII Campaña de Atención al Mayor, podrán inscribirse en las diferentes actividades de la VI Escuelas Deportivas para mayores. Se impartirán clases de pádel, tenis de mesa, petanca, rutas...</p>
                            <a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" class="ect-events-read-more" rel="bookmark">Ir al evento »</a>
                        </div>
                    </div>
                </div>
                <div class="p1-venue">
                    <div class="ect-list-venue  default-venue">
                        <span class="ect-icon">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                        </span>
                        <span class="ect-venue-details ect-address">
                            <a href="https://www.lagaleramagazine.es/lugar/area-de-atencion-al-mayor-ayuntamiento-de-badajoz/" title="Area de atención al Mayor , Ayuntamiento de Badajoz">Area de atención al Mayor , Ayuntamiento de Badajoz</a>,
                            <span class="tribe-address">
                                <span class="tribe-locality">Badajoz</span>
                                <span class="tribe-delimiter">,</span>
                                <abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr>
                                <span class="tribe-country-name">España</span>
                            </span>
                        </span>
                        <span class="ect-google">
                            <a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a>
                        </span>
                        <div class="ect-rate-area">
                            <span class="ect-rate-icon">
                                <i class="fa fa-money" aria-hidden="true"></i>
                            </span>
                            <span class="ect-rate">Gratuito</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

如果您更改其他.btn1的文本，就像隐藏其他.p1-img和.p1-img一样，则可以解决此问题。使用

可以轻松完成此操作

$(".btn1").not(this).text('Más detalles');

紧随

$(".p1-img").not($p1img).hide();

如下；

$("document").ready(function(){
    $(".btn1").click(function() {
        if ($.trim($(this).text()) === 'Más detalles') {
          $(this).text('Menos detalles');
        } else {
          $(this).text('Más detalles');
        }
        
        var $p1 = $(this).next(".p1");
        var $p1img = $(this).parents().eq(4).find(".p1-img");
      
        $p1.toggle();
        $p1img.toggle();
      
        $(".p1").not($p1).hide();
        $(".p1-img").not($p1img).hide();
        $(".btn1").not(this).text('Más detalles');
        
      });
});

.p1, .p1-img {
    display: none;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="details.css">
    <script src="details.js"></script>
</head>
<body>
    <div id="event-56092" class="ect-list-post ect-featured-event  data-parent-post " id=" 56053">
        <div class="ect-list-post-left ">
            <div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/50008823_1936412149789348_6701274349090897920_n-1024x715.jpg');background-size:cover;background-position:center center;">
                <a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
                    <div class="ect-list-date">
                        <div class="ect-date-area default-schedule">
                            <span class="ev-day">25</span>
                            <span class="ev-mo">febrero</span>
                            <span class="ev-yr">2019</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="ect-list-post-right">
            <div class="ect-list-post-right-table">
                <div class="ect-list-description">
                    <h2 class="ect-list-title">
                        <a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="VI Escuelas Deportivas para Mayores" rel="bookmark">VI Escuelas Deportivas para Mayores</a>
                    </h2>
                    <button class="btn1 button-more svg" >Más detalles</button>
                    <div class="p1" style="display: none;">
                        <div class="ect-event-content">
                            <p>Desde el lunes 21 de enero y hasta el martes 18 de junio, todos los socios de los Centros Municipales de Mayores que participan en la XXIII Campaña de Atención al Mayor, podrán inscribirse en las diferentes actividades de la VI Escuelas Deportivas para mayores. Se impartirán clases de pádel, tenis de mesa, petanca, rutas...</p>
                            <a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" class="ect-events-read-more" rel="bookmark">Ir al evento »</a>
                        </div>
                    </div>
                    <br>
                    <br>
                    <button class="btn1 button-more svg" >Más detalles</button>
                    <div class="p1" style="display: none;">
                        <div class="ect-event-content">
                            <p>Desde el lunes 21 de enero y hasta el martes 18 de junio, todos los socios de los Centros Municipales de Mayores que participan en la XXIII Campaña de Atención al Mayor, podrán inscribirse en las diferentes actividades de la VI Escuelas Deportivas para mayores. Se impartirán clases de pádel, tenis de mesa, petanca, rutas...</p>
                            <a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" class="ect-events-read-more" rel="bookmark">Ir al evento »</a>
                        </div>
                    </div>
                </div>
                <div class="p1-venue">
                    <div class="ect-list-venue  default-venue">
                        <span class="ect-icon">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                        </span>
                        <span class="ect-venue-details ect-address">
                            <a href="https://www.lagaleramagazine.es/lugar/area-de-atencion-al-mayor-ayuntamiento-de-badajoz/" title="Area de atención al Mayor , Ayuntamiento de Badajoz">Area de atención al Mayor , Ayuntamiento de Badajoz</a>,
                            <span class="tribe-address">
                                <span class="tribe-locality">Badajoz</span>
                                <span class="tribe-delimiter">,</span>
                                <abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr>
                                <span class="tribe-country-name">España</span>
                            </span>
                        </span>
                        <span class="ect-google">
                            <a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a>
                        </span>
                        <div class="ect-rate-area">
                            <span class="ect-rate-icon">
                                <i class="fa fa-money" aria-hidden="true"></i>
                            </span>
                            <span class="ect-rate">Gratuito</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

警告：您用来打开page的所有按钮必须属于.btn1。

单击列表的另一个按钮时切换文本

1 个答案: