三行代码  ›  专栏  ›  技术社区  ›  seriously

图像在popover中多次迭代

  •  1
  • seriously  · 技术社区  · 1 周前

    我有一个包含多个图像的div,当悬停在图像上时,它会触发一个包含悬停图像的popover,它可以正常工作。问题是,当我将鼠标悬停在另一个图像上时,它会将新的悬停图像附加到popover上,但不会删除以前的悬停图像。我试图删除popover中的前一个图像,但每当我这样做时,它就会中断程序,悬停的图像不再显示在popover上。我哪里出错了?如何使特定的悬停图像仅显示在触发的popover上?

    在添加新图像之前,我注释掉了我试图删除的内容,这样你们就可以在不中断程序的情况下查看当前的迭代图像。

    在我删除之前附加的图像后,程序不会在popover中显示图像,但是当您检查元素时,它会显示由于某种原因图像在popover中不可见。令人困惑

    function appendImg() {
      const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
      $('.infoBar').append('<div class="imgWrap" 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 class="infoBarElementContentView"></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/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>
    1 回复  |  直到 1 周前
        1
  •  1
  •   tao    1 周前

    你必须清空 .infoBarPopoverContent 在添加当前图像之前。

    因此:

     $('.infoBarPopoverContent')
       .append('<div class="infoBarElementContentView"></div>')
    

    变成这样:

     $('.infoBarPopoverContent')
       .empty()
       .append('<div class="infoBarElementContentView"></div>')
    

    看到它工作了吗

    function appendImg() {
      const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
      $('.infoBar').append('<div class="imgWrap" 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 class="infoBarElementContentView"></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/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>