尝试根据轮播上出现的图像更改标题和描述时出错

Posted 2023-05-08

【中文标题】尝试根据轮播上出现的图像更改标题和描述时出错

【英文标题】：Error trying to change a title and description based on the image appearing on carousel

【发布时间】：2019-12-04 05:47:07

【问题描述】：

我的页面上有一个部分，分为 3 个部分，首先是“信息”，然后是“指标”，最后是“轮播”。

我的问题是“信息”部分必须与“轮播”同步，以便显示与图像相关的一些信息，但它有延迟，因为它显示了最后一个活动组件的信息轮播，而不是当前的。

你可以在下一页看到这个的实际状态：https://demos.posicionart.com/grupocob/casos-de-exito.php

JS

$(document).ready(function() 
    showInformation();
    // cuando se hace el slide automatico
    $('#myCarousel').bind('slide.bs.carousel', function (e) 
        showInformation();
    );
    // cuando se hace el slide a traves de los puntos
    $('#myCarousel').bind('slid', function (e) 
        showInformation();
    );
);

function showInformation()
    var title;
    var desc;
    $('ol.carousel-indicators > li').each(function()
       if($(this).hasClass('active'))
           title = $(this).data('title');
           desc = $(this).data('desc');
           $('#nombre-caso').html(title);
           $('#descripcion-caso').html(desc);
       
    );

HTML

<div class='container-fluid'>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <div class='row mx-0'>
                <div class="col-lg-3 col-md-3 col-sm-12 px-5">
                    <h3 class="primary-color text-center text-uppercase" id="nombre-caso"></h3>
                    <h6 id="descripcion-caso" class="primary-color text-center"></h6>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-12">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-title="Harley Davison QRO" data-desc="Diseño y construcción - Área de 1,550 M2" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-title="Agencias Freightliner" data-desc="prueba desc" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-title="Estructura Cubierta LOARCA" data-desc="Cubierta 950 M2" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-title="Centro Automotriz Del Bajío" data-desc="prueba desc" data-slide-to="3"></li>
                        <li data-target="#myCarousel" data-title="Almacenes San Rafael" data-desc="Cubierta 780 M2" data-slide-to="4"></li>
                        <li data-target="#myCarousel" data-title="Bodegas Industriales" data-desc="Cubierta 780 M2" data-slide-to="5"></li>
                        <li data-target="#myCarousel" data-title="Residencial Querétaro" data-desc="Construcción" data-slide-to="6"></li>
                        <li data-target="#myCarousel" data-title="Secundaria Ignacio M. Altamirano" data-desc="Cancha y cafetería - Capacidad 890 alumnos" data-slide-to="7"></li>
                        <li data-target="#myCarousel" data-title="Oficinas ICSI" data-desc="CENTRAL PARK" data-slide-to="8"></li>
                        <li data-target="#myCarousel" data-title="Casa LC ZIBATÁ" data-desc="prueba desc" data-slide-to="9"></li>
                    </ol>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-12 px-0">
                    <!-- The slideshow -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="img/casos-exito/cob_galeria_01_harley.jpg" class="img-fluid w-100 h-100" >
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_02_freightliner.jpg" class="img-fluid w-100 h-100" >
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_03_loarca.jpg" class="img-fluid w-100 h-100" >
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_04_automotriz_bajio.jpg" class="img-fluid w-100 h-100" >
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_05_almacenes.jpg" class="img-fluid w-100 h-100" >
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_06_bodegas_industriales.jpg" class="img-fluid w-100 h-100" >
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_07_residencial_queretaro.jpg" class="img-fluid w-100 h-100" >
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_08_secundaria_ignacio_altamirano.jpg" class="img-fluid w-100 h-100" >
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_09_oficinas_icsi.jpg" class="img-fluid w-100 h-100" >
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_10_casa_zibata.jpg" class="img-fluid w-100 h-100" >
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

在“信息”部分，我想显示保存在与轮播指示器相关的全局变量（data-title 和 data-desc）中的文本（因为它们具有基于实际图像的活动类出现在轮播）。

编辑 我为我的每个 li 项目创建了一个新的点击函数，该函数为点击的 li 项目添加了一个新类，因此我没有检查“活动”，而是检查“点击”以获取信息。另一方面，对于引导轮播提供的自动幻灯片，我决定检查我的“活动” li 项目的下一个索引，这就是我获得正确信息的方式。

【参考方案1】：

您想在此处绑定slid.bs.carousel 事件$('#myCarousel').bind('slid', function (e) 而不是slid 事件。

你也可以像这样改变你的showinformation方法

function showInformation()
    var title;
    var desc;
    var active = $('ol.carousel-indicators > li.active');

    title = active.data('title');
    desc = active.data('desc');
    $('#nombre-caso').html(title);
    $('#descripcion-caso').html(desc);

这样您就不会每次都爬过li 元素。

这是一个小提琴https://jsfiddle.net/tyddlywink/r7znd9wp/ 来看看。您的网站被我的工作网络阻止，因此我无法查看您的页面以获取确切的 css 和其他内容。但是这个小提琴具有您正在寻找的功能。