0

我有一个“ a”标签到一个“ li”中，并且在将“”悬停时附加了一些图像li到相同的“a”标签中，我必须在所有这些 img 元素上使用内联样式，但问题是当我第一次悬停在“ li”这些样式仅适用于始终存在的第一个 img 标签，但不适用于其他标签，但如果我li再次将鼠标悬停在“”上，则这些内联样式适用于所有 img 标签。为此，我使用下面给出的这个 JS 代码：

$(document).ready(function() {
var mouseover_interval;
var $image;

$('li.product-details').mouseenter(function() {
current_image = -1;
$image = $(this).find('a.current_product_image img');
data_srcs = $image.attr('data-srcs').split(",");

if(data_srcs.length >1){
  for (var i = data_srcs.length - 1; i >= 0; i--) {
    img = new Image ;
    img.src = data_srcs[i];
    new_img = $('<img>').attr('src', data_srcs[i]).css({display:"none"}).addClass("over");
    $(this).find('a.current_product_image').append(new_img);
    var countImg = $(this).find('a.current_product_image img');
    countImg.each(function(){
      $(this).css({
        position : 'absolute',
        left : '50%',
        marginLeft : -$(this).width()/2,
        top : '50%',
        marginTop : -$(this).height()/2,
      });
    });
  }
}
else{
  return false;
}

$images = $(this).find('a.current_product_image img.over');
mouseover_interval = setInterval(function(){
{
    $image.fadeOut(500);
    if(current_image == -1){
      $($images[$images.length-1]).fadeOut(500);
    }
    else{
      $($images[current_image]).fadeOut(500);  
    }

    current_image+=1; 
    $($images[current_image]).fadeIn(500);

    if(current_image == $images.length-1){
      current_image = -1;
    }
  }
}, 1000);
}).mouseleave( function(){
clearInterval(mouseover_interval);
$image.fadeIn(500);
$(this).find('a.current_product_image img.over').remove();
});
});

li如何在第一次悬停在“”上的所有附加元素上添加样式？请让我知道是否在那里使用了任何错误。

在此先感谢阿什瓦尼夏尔马

4

1 回答 1

1

发生这种情况的原因很可能是其他图像尚未加载到 DOM 中（请记住，当您动态添加资产时，加载它们需要时间，尤其是图像）。

要确认这一点，请尝试记录countImgvar 并查看它是否报告的图像数量与您期望的图像数量相比太少。我怀疑这是你的问题。

您可以尝试在将属性添加到页面之前将其传递给元素。像这样的东西：

new_img = $('<img>', {
    src: data_srcs[i],
    class: 'over'
}).hide();

这应该创建一个如下所示的对象：

<img src="your/source.jpg" class="over" style="display: none;" />

您的问题仍然是，在您关闭 之前，它实际上不会加载到页面中display: none，大多数浏览器都足够智能，在实际需要它们之前不会拉取图像（即：不是隐藏时）。

另请注意，您的声明$image仅在函数的开头设置一次。因此，它将仅包含它在该时间点找到的元素。如果您将其他图像（即：您的 ）动态添加new_img到父元素，它们将不会自动添加到该$image变量中。

于 2013-06-04T07:50:00.440 回答