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

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

使用均衡器：https://api.jquery.com/eq/

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

Answer 2

您应该使用 onSlideNext 回调提供的参数，returns 当前 element/slide。

$slideElement: jQuery element of the destination element

oldIndex: element index of the previous slide (before the transition)

newIndex: element index of the destination slide (after the transition)

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

$('#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());
}

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

<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>

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

How to transfer and update content from one div to another jquery/javascript

javascript

jquery

bxslider