浏览器正在自动分配函数参数的值

如何解决浏览器正在自动分配函数参数的值

我在 javascript 上遇到了一个奇怪的错误，我尝试了不同的方法来解决它，但在这种情况下，它打败了我。这段代码的想法是在用户按下元素标签 h5 '<h5 class="m" id="myelem">galery of photos</h5>' 时显示可用的照片库，然后网站显示带有 SweetAlert2 和 Bootstrap 的照片库。

因此，当我单击 h5 元素时，它会运行名为 sweetCarousel 的函数，该函数显示照片库。此时我以这种方式调用函数 sweetCarousel.bind(this,...) 来接收参数，在本例中是来自照片的 URL。我在 Sweetalert 中注入 HTML 代码。作为条件，警报内的 HTML 会根据我要显示的照片数量而变化。有趣的是，当我只加载一张这样的照片时：

document.getElementById("myelem").addEventListener("click",sweetCarousel.bind(this,"./img/image1.jpg"));

浏览器是这样设置参数值的： img1 = "./img/image1.jpg",img2 = MouseEvent {isTrusted: true,screenX: 449,screenY: 442,clientX: 449,clientY: 339,...},img3 = ""

所以第一个条件 if (img2.length == 0) { 跳过它并转到第二个条件 if (img3.length == 0) {。我不知道为什么会发生这个错误。我计划在第一个条件中评估代码，因为我只传递了一个图像作为参数

function sweetCarousel(img1,img2 = "",img3 = "") {
  if (img2.length == 0) {
     eee = '<div class=""> <div class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>  </ol> <div class="carousel-inner" role="listBox"> <div class="item active"> <img src="' + img1 +'"> </div> </div> <!-- Controls -->  </div></div>';
  } else if (img3.length == 0) {
     eee = '<div class=""> <div class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <div class="carousel-inner" role="listBox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">PrevIoUs</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
  } else {
     eee = '<div class=""> <div class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listBox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <div class="item"> <img src="' + img3 +'"> </div> </div> <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">PrevIoUs</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
  }
  Swal.fire( {
    html: eee,width: '50%',background: "black !important",showCloseButton: true,showCancelButton: false,showConfirmButton: false,focusConfirm: false
  });
  $(".carousel").swipe({
    swipe: function(event,direction,distance,duration,fingerCount,fingerData) {

      if (direction == 'left') $(this).carousel('next');
      if (direction == 'right') $(this).carousel('prev');

    },allowPageScroll:"vertical"
  });
}

解决方法

这是预期的行为。当您为 addEventListener() 方法提供事件侦听器时，侦听器必须实现 EventListener 接口。

所以如果你想给监听器提供额外的参数，我建议你使用闭包。

document.getElementById("trigger1").addEventListener("click",eventListener( ["./img/image1.jpg"]).bind(this));

document.getElementById("trigger2").addEventListener("click",eventListener(["./img/image1.jpg","./img/image2.jpg"]).bind(this));

document.getElementById("trigger3").addEventListener("click","./img/image2.jpg","./img/image3.jpg"]).bind(this));


function eventListener(images){
    return function(event){
      console.log('images',images);
      console.log('event',event);
    }
}

<button id="trigger1">Trigger 1</button> 
<button id="trigger2">Trigger 2</button> 
<button id="trigger3">Trigger 3</button>

而且我建议您将图像作为数组传递，而不是将它们作为单独的参数传递。通过使用数组，您可以用循环替换 if/else 块以创建更通用的函数。想象一下，您将来要提供 50 个图像，那么您必须创建 50 个 if/else 块。您可以按照以下方式进行：

document.getElementById("trigger").addEventListener("click","./img/image3.jpg"]).bind(this));


function eventListener(images) {
  return function(event) {

    const indicators = images.map(function(image,index) {
      return `
      <li 
         data-target="#carousel-example-generic" 
         data-slide-to="${index}" 
         ${index === 0 ? `class="active"` : ``}
      ></li>
      `
    })

    const imageItems = images.map(function(image,index) {
      return `
      <div class="item ${index === 0 ? `active` : ``}"> 
        <img src="${image}"> 
      </div>
      `
    })

    const carousel = `
      <div class="">
   <div class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
         ${indicators}
      </ol>
      <div class="carousel-inner" role="listbox">
         ${imageItems}
      </div>
      <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> 
   </div>
</div>
      `

    console.log(carousel)
  }
}

<button id="trigger">Trigger</button>

浏览器正在自动分配函数参数的值

如何解决浏览器正在自动分配函数参数的值

解决方法

相关推荐