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个图像缩略图，当悬停时会更改页面上的主要产品图像。缩略图悬停事件将触发器（）发送到同一页面上的选择列表（具有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
}

上行变化不大。下行是不必要的函数调用。

jQuery / Javascript - 只运行一次函数

1 个答案: