影像在彈出視窗中迭代多次-有解無憂

我有一個包含多個影像的 div，當懸停在影像上時會觸發一個彈出框，其中包含懸停在??其上的影像并且它有點作業。問題是當我將滑鼠懸停在另一個影像上時，它會將新懸停的影像附加到彈出框，但不會洗掉先前懸停的影像。我試圖洗掉彈出視窗中的前一個影像，但每當我這樣做時，它都會破壞程式，并且懸停的影像不再顯示在彈出視窗上。我哪里做錯了？如何使特定的懸停影像僅顯示在觸發的彈出視窗上？

我在添加新影像之前注釋掉了我試圖洗掉前一個影像的內容，以便你們可以查看當前的迭代影像而不會破壞程式。

更新：

在我洗掉先前附加的影像后，程式不會在彈出視窗中顯示影像，但是當您檢查元素時，它顯示影像由于某種原因在那里，但它在彈出視窗中不可見。混亂..??

function appendImg() {
  const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
  $('.infoBar').append('<div  id="test'   (newId   1)   '"><img src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
  addEvent();
}

var popOverSettings2 = {
  selector: '.infoBar .imgWrap',
  container: 'body',
  html: true,
  trigger: "manual",
  placement: 'top',
  sanitize: false,
  animation: false,
  content: function() {
    setTimeout(() => {
      $('.popover').css({
        'width': '20%',
        'height': '20%',
        'overflow': 'auto'
      })
    })
    if ($(this).attr('class') == 'imgWrap') {
      const currnetInfoBarElementView = $(this).attr('id')
      let source = $("#"   currnetInfoBarElementView).children()

      //This is what I tried removing the previous appended container so that it won't iterate but it doesn't work
      //$('.infoBarElementContentView').remove()

      $('.infoBarPopoverContent').append('<div ></div>')
      source.clone(true).addClass('dataDisplayClone').appendTo('.infoBarElementContentView')
      $('.dataDisplayClone img').css({
        'width': '100%',
        'height': '100%'
      })
      return $('.infoBarPopoverContent').html();
    }
  }
}


function addEvent() {
  $(function() {
    $('.infoBar .imgWrap').popover(popOverSettings2)
      .on("mouseenter", function() {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function() {
          $(_this).popover('hide');
        });
      }).on("mouseleave", function() {
        var _this = this;
        if (!$(".popover:hover").length) {
          $('.popover').popover('hide');
        }
      });
  });
}

addEvent()

button {
  position: absolute;
  top: 0%;
  left: 0%;
}

.infoBar {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 30%;
  max-width: 95%;
  height: 160px;
  margin: auto;
  column-gap: 25px;
  background-color: green;
  overflow-x: auto;
}

.infoBar .imgWrap {
  height: 100%;
  cursor: pointer;
}

.infoBar .imgWrap img {
  height: 100%;
  cursor: pointer;
}

.infoBarPopoverContent {
  display: none;
}

.popover .popover-body {
  overflow-x: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<button onclick='appendImg()'>Click to append img</button>

<div class="infoBar" id="infoBar">
  <div class="imgWrap" id='test1'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test2'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test3'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test4'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test5'><img src="https://picsum.photos/200/300"></div>
</div>

<div class="infoBarPopoverContent"></div>

uj5u.com熱心網友回復：

.infoBarPopoverContent在將當前影像添加到其中之前，您必須清空。

所以這：

 $('.infoBarPopoverContent')
   .append('<div ></div>')

變成這樣：

 $('.infoBarPopoverContent')
   .empty()
   .append('<div ></div>')

看到它作業：

顯示代碼片段

function appendImg() {
  const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
  $('.infoBar').append('<div  id="test'   (newId   1)   '"><img src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
  addEvent();
}

var popOverSettings2 = {
  selector: '.infoBar .imgWrap',
  container: 'body',
  html: true,
  trigger: "manual",
  placement: 'top',
  sanitize: false,
  animation: false,
  content: function() {
    setTimeout(() => {
      $('.popover').css({
        'width': '20%',
        'height': '20%',
        'overflow': 'auto'
      })
    })
    if ($(this).attr('class') == 'imgWrap') {
      const currnetInfoBarElementView = $(this).attr('id')
      let source = $("#"   currnetInfoBarElementView).children()

      //This is what I tried removing the previous appended container so that it won't iterate but it doesn't work
      //$('.infoBarElementContentView').remove()

      $('.infoBarPopoverContent').empty().append('<div ></div>')
      source.clone(true).addClass('dataDisplayClone').appendTo('.infoBarElementContentView')
      $('.dataDisplayClone img').css({
        'width': '100%',
        'height': '100%'
      })
      return $('.infoBarPopoverContent').html();
    }
  }
}


function addEvent() {
  $(function() {
    $('.infoBar .imgWrap').popover(popOverSettings2)
      .on("mouseenter", function() {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function() {
          $(_this).popover('hide');
        });
      }).on("mouseleave", function() {
        var _this = this;
        if (!$(".popover:hover").length) {
          $('.popover').popover('hide');
        }
      });
  });
}

addEvent()

button {
  position: absolute;
  top: 0%;
  left: 0%;
}

.infoBar {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 30%;
  max-width: 95%;
  height: 160px;
  margin: auto;
  column-gap: 25px;
  background-color: green;
  overflow-x: auto;
}

.infoBar .imgWrap {
  height: 100%;
  cursor: pointer;
}

.infoBar .imgWrap img {
  height: 100%;
  cursor: pointer;
}

.infoBarPopoverContent {
  display: none;
}

.popover .popover-body {
  overflow-x: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<button onclick='appendImg()'>Click to append img</button>

<div class="infoBar" id="infoBar">
  <div class="imgWrap" id='test1'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test2'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test3'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test4'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test5'><img src="https://picsum.photos/200/300"></div>
</div>

<div class="infoBarPopoverContent"></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/412009.html

標籤：

上一篇：如何用滑鼠滾輪控制光滑的滑塊？

下一篇：在檔案輸入更改時，將帶有formdata的表單提交到php檔案并上傳影像檔案