当用户浏览此Jquery滑块时，如何更改Span元素的文本？

Question

有没有一种方法可以使用jQquery更改“ video_box_label”跨度元素的文本内容，以响应“ flexslider”幻灯片放映中哪个幻灯片处于活动状态？ 换句话说，当幻灯片移动到第二张幻灯片时，我希望它从“与团队见面”更改为“阿迪尔·萨利姆”。 我知道幻灯片显示为活动列表项提供了“ flex-active-slide”类，如果有帮助的话。 请注意，下面的这段代码很难预览，因为它指向一些内部可访问的jquery文件。 另外，我从以下站点获得了滑块： http : //flexslider.woothemes.com/index.html

<link rel="stylesheet" href="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/ProductionPayrollHomeFlexslider.css" type="text/css" media="screen" />
<link href='https://fonts.googleapis.com/css?family=Asap' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Annie Use Your Telescope' rel='stylesheet'>

<script src="https://epwork.ep.corp/wg/ProdPayroll/jquery/jquery.min.js.js"></script>
<script defer src="https://epwork.ep.corp/wg/ProdPayroll/jquery/jquery.flexslider.js"></script>

<link rel="stylesheet" href="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/ProductionPayrollHomeSlideShow.css">
<script src="https://epwork.ep.corp/wg/PayrollSolutions/SolutionsSetup/SiteAssets/plyr.js"></script>
<script src="https://epwork.ep.corp/wg/PayrollSolutions/SolutionsSetup/SiteAssets/jquery1.9.0.min.js"></script>

<script type="text/javascript">
$(window).load(function(){
    $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
        $('body').removeClass('loading');
        }
    });
    jQuery( '.flexslider' ).flexslider( 'pause' );
});

$(document).ready(function() {
    $("#Abijah_Ayele_image").click(function(){
        $("#Abijah_Ayele_slide").html('<video poster="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Abijah_Ayele.jpg" controls preload="none">'+
        '<source id="video_player_source1" src="https://epwork.ep.corp/wg/ProdPayroll/Videos_People/Abijah_Ayele.mp4" type="video/mp4">'+
        '</video>')+'<p class="flex-caption">Abijah Ayele</p>';
    });

    $("#slide_image_2").click(function(){
        $("#slide2").html('<video poster="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adil_Saleem.jpg" controls preload="none">'+
        '<source id="video_player_source2" src="https://epwork.ep.corp/wg/ProdPayroll/Videos_People/Adil_Saleem.mp4" type="video/mp4">'+
        '</video>');
    });

    $("#slide_image_3").click(function(){
        $("#slide3").html('<video poster="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adriel_Balatbat.jpg" controls preload="none">'+
        '<source id="video_player_source2" src="https://epwork.ep.corp/wg/ProdPayroll/Videos_People/Adriel_Balatbat.mp4" type="video/mp4">'+
        '</video>');
    });
}); 

$(document).ready(function() {
    $('.flexslider').click(function() {
        $("video").each(function(){
            $(this).get(0).pause();
                jQuery( '.flexslider' ).flexslider( 'pause' );
            });
    });
}); 
</script>

<style>

@font-face{
    font-family:"flexslider-icon";
    src: url("https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/flexslider-icon.eot") /* EOT file for IE */
}

@font-face{
    font-family:"flexslider-icon";
    src: url("https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/flexslider-icon.ttf") /* TTF file for CSS3 browsers */
}

a:hover{
    text-decoration: none !important;
}

#WoodenBackgroundContainer{
    background-image: url('/wg/ProdPayroll/Images_Decorative/WoodBackgroundDark.jpg') !important; 
    width: 100%; 
    height: 1300px;
}

#container{
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 1000px;
    height: 1300px;
    background: linear-gradient(#88D4E6, #307996) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#307996); /* For IE 11*/
    text-align: center;
    position: absolute;
}

#decorative_side_bar_left{
    position:absolute; 
    height: 1300px; 
    left: 0;
    width: 38px;
    background-image: url("https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/decorative_diagonal_side_bar.jpg");
    z-index: 1;
}

#decorative_side_bar_right{
    position:absolute;
    height: 1300px;
    width: 38px;
    right: 0;
    background-image: url("https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/decorative_diagonal_side_bar.jpg");
    z-index: 1;
}

#bulb1{
    position:relative; 
    right: 20px; 
    top: 70px; 
    width: 100px; 
    display: inline;
}

#payroll_welcome_header{
    font-family: 'Asap'; 
    font-size: 350%; 
    text-align: center; 
    padding-top: 68px; 
    display: inline;
}

#bulb2{
    position:relative; 
    left: 20px; 
    top: 70px; 
    width: 100px; 
    display: inline;
}

#payroll_welcome_statement{
    font-family: 'Asap'; 
    text-align: center; 
    font-size: 190%;
}

#bulletin_board_backdrop{
    height: 225px;
    width: 1000px;
    right: 0;
    background-image: url("https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/bulletin-background.jpg");
}

#postit_1_container{
    position: relative; 
    display: inline-block; 
    margin-right: 0px; 
    transform: rotate(-12deg); 
    top:16px;
}

#postit_1{
    width: 225px;
}

#post_it_text1{
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%) rotate(-1deg) !important; 
    font-size: 29px; 
    font-family: 'Annie Use Your Telescope';
}

#postit_2_container{
    position: relative; 
    display: inline-block; 
    margin-left: 115px; 
    transform: rotate(12deg); 
    top:16px;
}

#postit_2{
    width: 225px;
}

#post_it_text2{
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) rotate(-1deg) !important; 
    font-size: 29px; 
    width: 190px; 
    font-family: 'Annie Use Your Telescope';
}

#video_box_label{
    display: block; 
    font-size: 24px; 
    font-family: 'Asap'; 
    color: #FFFFFF; 
}

.flexslider{
    height: 415px; 
    width: 746px; 
    background-color: #696969; 
    margin: auto; 
    margin-top: 4px; 
}

.flexslider video{
    width:100%;
}

.flexslider img{
    height: 415px !important;
}

.flexslider video{
    height: 415px !important;
}

.flex-caption{
    font-size: 15px !important; 
    margin-top:65px !important;
}

/* this makes the image poster fit the video viewport
video{
   object-fit: inherit;
}
*/
</style>


<div id="WoodenBackgroundContainer">
    <div id="container">
        <div id="decorative_side_bar_left"></div>
        <div id="decorative_side_bar_right"></div>
        <img id="bulb1" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/lightbulb_icon.png" />
        <h1 id="payroll_welcome_header">WELCOME TO THE PRODUCTION PAGES</h1>
        <img id="bulb2" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/lightbulb_icon.png" />
        <h2 id="payroll_welcome_statement">Reinventing how the entertainment industry works<br/>and interacts to make production simple</h2>
        <br/><br/><br/><br/><br/><br/>
        <span id="video_box_label">Meet the Team:</span>
        <div class="flexslider">
            <ul class="slides">
                <li id="Abijah_Ayele_slide">
                    <img id="Abijah_Ayele_image" src="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Abijah_Ayele.jpg">    
                </li>
                <li id="slide2">
                    <img id="slide_image_2" src="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adil_Saleem.jpg">
                </li>
                <li id="slide3">
                    <img id="slide_image_3" src="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adriel_Balatbat.jpg">
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

您可以使用flexslider的after或before函数，然后将一些想要放入跨度的数据作为目标。 我在示例中使用after函数将标题范围更改为当前图像的data-text属性。

希望能有所帮助。

 $('.flexslider').flexslider({ animation: "slide", after: function(){ //console.log("do Something"); var target = $(".flex-active-slide img").attr("data-text"); $("#titleHere").html(target); } }); 

 .flexslider { width: 200px; height: 200px; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/flexslider.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider-min.js"></script> <!-- Place somewhere in the <body> of your page --> <span id="titleHere">TITLE HERE</span> <div class="flexslider"> <ul class="slides"> <li> <img src="https://dummyimage.com/200" data-text="NEW TITLE 1"/> </li> <li> <img src="https://dummyimage.com/210" data-text="NEW TITLE 2"/> </li> <li> <img src="https://dummyimage.com/220" data-text="NEW TITLE 3"/> </li> <li> <img src="https://dummyimage.com/230" data-text="NEW TITLE 4"/> </li> </ul> </div> 

Answer 2

该jQuery代码段会将“ video_box_label”跨度元素的文本内容更改为“ Adil Saleem”。 参见https://www.w3schools.com/jquery/html_text.asp

$('#video_box_label').text('Adil Saleem');