jquery - 仅运行事件触发函数一次

Question

更新:

标签悬停时的缩略图会调用名为 displayImage() 的函数:

    function displayImage(index, parent){
    var images = document.getElementById(parent).getElementsByClassName("mainProductImage");
        
    for(var i = 0; i < images.length; i++) {
      var image = images[i];
      if (image.className != 'mainProductImage')  { continue }
      if(i == index-1) {
            // display main image
        image.style.display="block";
            // change selectedIndex of select list 
        jQuery("#mySelect").attr('selectedIndex', index-1);
        jQuery('#mySelect').trigger('change', [ i ]);           
      }
      else {
        image.style.display="none";
      }     
   }
}

我意识到我没有很好地解释这一点:) 我有 n 个图像缩略图，当它们悬停时会更改页面上的主要产品图像。缩略图悬停事件将 trigger() 发送到同一页面上的选择列表(包含 n 个产品的下拉列表，如果有 3 个图像，选择列表中有 3 个相应的产品项)。

根据帕特里克的建议，我首先在悬停缩略图时将其添加到循环中:

jQuery('#mySelect').trigger('change', [ i ]); // now passing the i variable

然后我添加:

$('#mySelect').change( function( event, idx ) {
if( idx === 0 ) {
   $('#fade').fadeOut('fast');
   $('#fade').fadeIn('slow');
}

此代码现在限制当我将鼠标悬停在缩略图上时图像淡入淡出的次数，但由于某种原因仍然淡出两次，而不是一次。

我还希望在更改选择列表中的产品项目时出现图像淡入淡出效果，但现在不起作用，因为 .change() 函数无法识别 [i] 来自循环数组。因此，我需要一种解决方案，当鼠标悬停在缩略图上或更改产品选择列表项时，该解决方案将触发淡入淡出。

我希望这是有道理的!

---

有没有办法在常规 JavaScript 函数中只运行一次 jQuery 代码？

我有一个 fadeImage() 函数，根据页面上的不同事件调用该函数以实现图像转换目的。这些事件之一是由 for 循环触发的。循环导致函数被调用多次，因此图像的淡入和淡出会循环，直到循环完成。我需要从循环内部触发淡入淡出效果，但仅一次，因此我希望不要更改循环区域中的任何内容，而是让淡入淡出功能无论如何只运行一次。

我试过.one()但运气不佳。

function fadeImage()
{
    // is there a way to run these two lines only once? 
    $('#fade').fadeOut('fast');
    $('#fade').fadeIn('slow');
}

非常感谢任何建议。或者任何其他想法，也许我根本不需要一个函数来包装 jQuery 代码？

Answer 1

根据下面的评论，听起来像是在 for 循环中，您多次触发 .change() 事件。

如果您使用 .trigger() 而不是 .change()，您可以将“额外参数”发送到数组中的处理程序。

因此，您的 for 循环将类似于:

var myselect = $('#mySelect');

for( var i = 0; i < something.length; i++ ) {
    myselect.trigger( 'change', [ i ] );
    // ...and so on
}

然后您的处理程序将设置一个参数来接受该 i 参数。

$('#mySelect').change( function( event, idx ) {
    if( idx === 0 ) {
       $('#fade').fadeOut('fast');
       $('#fade').fadeIn('slow');
    }
});

---

在 for 循环中，您可以将变量设置为标志，指示它已被调用。

var alreadyCalled = false;

for( /* whatever */ ) {
    if( !alreadyCalled ) {
        fadeImage();
        alreadyCalled = true;
    }
    // ...and so on
}

另一种选择是让您的函数接受 for 循环中的索引参数，它使用该参数来确定代码是否应该运行。

function fadeImage( idx ) {
    if( idx === 0 ) {
       $('#fade').fadeOut('fast');
       $('#fade').fadeIn('slow');
    }
}

for( var i = 0; i < something.length; i++ ) {
    fadeImage( i );
    // ...and so on
}

好处是更少的困惑。缺点是不必要的函数调用。