文章/答案/技术大牛

发布

社区首页 >问答首页 >多个HTML内容的简单Javascript

问多个HTML内容的简单Javascript
EN

Stack Overflow用户

提问于 2015-01-21 19:40:04

回答 2查看 93关注 0票数 0

首先，我是一个很不错的javascript新手。

目前，我正在制作一个网站，其中有许多项目是列出的。每个项目都有一个默认图像和3个不同角度的产品图像。当用户悬停在缩略图上时，我使用JQuery在默认情况下显示一个完整大小的图像。

我的问题是，我有大约90项。是否有更简单的方法只在javascript中这样做，而不必嵌套90项。

它必须只有HTML / CSS / Javascript

目前有三个项目，它希望这样：

$(document).ready(function(){

// First thumbnail on each item
  $("#thumb1-1,#thumb2-1,#thumb3-1").hover(function(){
    $("#image1-1,#image2-1,#image3-1").show();$("#default1,#default2,#default3").hide();
  },function(){
    $("#image1-1,#image2-1,#image3-1").hide();$("#default1,#default2,#default3").show();
  });

// Second thumbnail on each item
  $("#thumb1-2,#thumb2-2,#thumb3-2").hover(function(){
    $("#image1-2,#image2-2,#image3-2").show();$("#default1,#default2,#default3").hide();
  },function(){
    $("#image1-2,#image2-2,#image3-2").hide();$("#default1,#default2,#default3").show();
  });

// Third thumbnail on each item

  $("#thumb1-3,#thumb2-3,#thumb3-3").hover(function(){
    $("#image1-3,#image2-3,#image3-3").show();$("#default1,#default2,#default3").hide();
  },function(){
    $("#image1-3,#image2-3,#image3-3").hide();$("#default1,#default2,#default3").show();
  });

});

粗略的视觉很可能会在页面的末尾加载图像以减少延迟，同时页面也会被分割成大约10页。

javascript

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-21 20:29:59

http://jsfiddle.net/8k5L5myo/2/

var totalImageTypeCount = 10;
var defaultImageCount = 1;
var thumbImageCount = 3;
var overlayImageCount = 2;
var wrapper = $(".wrapper");
var defaultTag = '<div class=".defaultTag"> this is default';
var overlayTag = '<div class=".overlayTag"> this is oeverlay';
var thumbTag = '<div class=".thumbTag"> this is Thumbnail';
var closeTag = "</div>";

for (var a = 0; a < totalImageTypeCount; a++) {
    wrapper.append(defaultTag);

    for (var b = 0; b < overlayImageCount; b++) {

        wrapper.append(overlayTag);
        wrapper.append(closeTag);
    }

    for (var c = 0; c < thumbImageCount; c++) {
                    wrapper.append(thumbTag);
                    wrapper.append(closeTag);
        }
    wrapper.append(closeTag);

}

使用for循环循环遍历您需要的所有图像，您可以使用src=-"dir/yourImage"+a+".jpg"，其中a将循环通过1-max数字。

票数 1

Stack Overflow用户

发布于 2015-01-21 20:04:13

如果我正确理解你的情况，这应该能行。

$(document).on("mouseenter", "[id^=thumb]", function(e) {
  $(this).show();
  var itemno = $(this).attr("id").replace("thumb","").replace("/-\d+/","");
  $("#default"+itemno).hide();
});
$(document).on("mouseleave", "[id^=thumb]", function(e) {
  $(this).hide();
  var itemno = $(this).attr("id").replace("thumb","").replace("/-\d+/","");
  $("#default"+itemno).show();
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28075477

复制

相似问题

问多个HTML内容的简单Javascript
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个HTML内容的简单JavascriptEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个HTML内容的简单Javascript
EN