Question

我有多张图片，文字包裹在bxslider中。我想从幻灯片中复制文本并将它们放在bxslider包装器外面的div中。按下下一张幻灯片时，它应该使用相应的文本更新div。我使用Bxslider回调函数onSlideNext尝试了以下代码，但它仍然显示第一个文本：

        $slider.bxSlider({
        mode: 'fade',
        speed: 300,
        adaptiveHeight: true,
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',

            onSlideNext: function() {
                mirrorContent();
            }
        });

这是功能：

        function mirrorContent() {
            $(".project-info-mirror").html($(".project-info").html());
        }

这是HTML

<div id="page-container">
    <div class="slider-container" id="slider-container">
        <div id="slider">
            <div class="item img">
                <div class="col">
                    <img src="img/img1.png"></img>
                        <div class="project-info" style="visibility:hidden">
                            <h2>Titel 1</h2>
                            Blah blah blah blah text
                        </div>
                    </div>
                </div>
            </div>
            <div class="item img">
                <div class="col">
                    <img src="img/img2.png"></img>
                        <div class="project-info" style="visibility:hidden">
                            <h2>Titel 2</h2>
                            Some other text
                        </div>
                    </div>
                </div>
            </div>
            <div class="item img">
                <div class="col">
                    <img src="img/img3.png"></img>
                        <div class="project-info" style="visibility:hidden">
                            <h2>Titel 3</h2>
                            Some other text
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class='content-info-mirror'></div>
</div>

非常感谢任何帮助。我是新来的。

Answer 1

使用eq：https://api.jquery.com/eq/

var currentSlide = 0;
function mirrorContent() {
    $(".project-info-mirror").html($(".project-info").eq(currentSlide++).html());
}

Answer 2

您应该使用onSlideNext回调提供的参数来返回当前元素/幻灯片。

$ slideElement：目标元素的jQuery元素

oldIndex：上一张幻灯片的元素索引（转换前）

newIndex：目标幻灯片的元素索引（在。之后）   过渡）

您可以发送该元素以将文本复制到.content-info-mirror div，您应该使用.text()仅抓取文本而不是.html()，并且您的HTML中有很多错误{1}}结构我刚刚在下面做了一个演示，看看这是否会帮助你，尝试在FULL屏幕上查看它，看看content-info-mirro div的文字在每次下一次点击时都会发生变化

＆＃13;

$('#slider').bxSlider({
  mode: 'fade',
  speed: 300,
  adaptiveHeight: true,
  // nextSelector: '#slider-next',
  // prevSelector: '#slider-prev',
  onSlideNext: function(elem, oldIndex, newIndex) {
    //console.log(elem.find('img').attr('src'), oldIndex, newIndex);
    mirrorContent(elem);
  }
});

function mirrorContent(elem) {
  $(".content-info-mirror").html($(elem).find('.project-info').text());
}

＆＃13;

.content-info-mirror {
  background-color: #c8c8c8;
  text-align: center;
  font-size: 2rem;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>


<div class='content-info-mirror'>Content Element</div>
<div id="page-container">
  <div class="slider-container" id="slider-container">
    <div id="slider">
      <div class="item img">
        <div class="col">
          <img src="https://static.pexels.com/photos/356378/pexels-photo-356378.jpeg">
          <div class="project-info" style="visibility:hidden">
            <h2>Titel 1</h2>
            Blah blah blah blah text
          </div>
        </div>
      </div>

      <div class="item img">
        <div class="col">
          <img src="https://s7d1.scene7.com/is/image/PETCO/puppy-090517-dog-featured-355w-200h-d">
          <div class="project-info" style="visibility:hidden">
            <h2>Titel 2</h2>
            Some other text
          </div>
        </div>
      </div>
      <div class="item img">
        <div class="col">
          <img src="https://www.what-dog.net/Images/faces2/scroll001.jpg">
          <div class="project-info" style="visibility:hidden">
            <h2>Titel 3</h2>
            Some other text from the tile 3
          </div>
        </div>
      </div>
    </div>




  </div>

＆＃13;

如何将内容从一个div传输和更新到另一个jquery / javascript

2 个答案: