首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >压缩重复的JQuery代码

压缩重复的JQuery代码
EN

Stack Overflow用户
提问于 2010-04-02 21:16:04
回答 4查看 438关注 0票数 1

我有一个页面上有一个很大的图像与许多缩略图。当您将鼠标悬停在缩略图上时,主图像将变为您刚刚将鼠标滚动到其上的图像。问题是我的缩略图越多,重复的代码就越多。我怎么能减少它呢?

Jquery代码如下所示。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript">  
    $('#thumb1')
.mouseover(function(){  
$('#big_img').fadeOut('slow', function(){  
$('#big_img').attr('src', '0001.jpg');  
$('#big_img').fadeIn('slow');  
            });  
        });  
    $('#thumb2')  
        .mouseover(function(){  
            $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', 'p_0002.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
     $('#thumb3')  
        .mouseover(function(){  
    $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', '_img/p_0003.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
     $('#thumb4')  
        .mouseover(function(){  
            $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', '0004.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
</script>

#big_img =全尺寸镜像的ID

#thumb1#thumb2#thumb3#thumb4 =缩略图的ID

页面的主要代码是PHP,如果有帮助的话。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2010-04-02 21:30:22

首先,你应该修改你的代码,使每个缩略图都有一个容易找到的“类”。

假设你有

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<img id="thumb1" scr=""/>
<img id="thumb2" scr=""/>
..

您的html应该如下所示

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<img id="thumb1" class='thumb' scr=""/>
<img id="thumb2" class='thumb' scr=""/>
..

其次,你应该确保你所有的缩略图和它们的大图像之间有一个可识别的模式。在你的代码中,我们有

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
0001.jpg
p_0002.jpg
_img/p_0003.jpg
0004.jpg

您的文件所在的组织是什么?

现在让我们假设缩略图与bug图像具有相同的src

jQuery代码将缩减为:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.thumb').mouseover(function(){

    var thumb_src = $(this).attr('src');

    // ==> add code here to transform thumb_src into the big_img src

    $('#big_img').fadeOut('slow', function(){
        $('#big_img').attr('src', thumb_src);
        $('#big_img').fadeIn('slow');
    });
});

这段代码应该可以工作,只需等待将拇指的src转换为大图像的src的算法。

我希望这能帮助你杰罗姆·瓦格纳

票数 2
EN

Stack Overflow用户

发布于 2010-04-02 21:26:02

$(this)是你的朋友。您还需要开发某种命名法,以便将您的文件名和id相匹配。我通常要做的是使用PHP生成HTML,但要放入处理文件名的特殊属性:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// PHP GeneratedContent

<?php

while(/* some range */) {
    $i = 1;
    $output .= '<element class="thumb" rel="p_' . $i . '.jpg">';
    $i++;
}

echo $output;
?>

然后我将开始下一步:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.thumb').mouseover( function() {
    var link = $(this).attr('rel');

    /* Now that you have the link, just put it into whatever function you need to */
});

Fehays方法肯定是有效的,但通过这种方式,您不会有大量不必要的ID,也不需要进行不必要的参数传递。它将使用类thumb自动传播到DOM中的每个实例。

票数 3
EN

Stack Overflow用户

发布于 2010-04-02 21:20:34

我想你可以只写一个函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
applyImageFade('#thumb1','0001.jpg');
applyImageFade('#thumb2','p_0002.jpg');
//etc...

function applyImageFade(thumbId, image) {
    $(thumbId).mouseover(function(){
        $('#big_img').fadeOut('slow', function(){
            $('#big_img').attr('src', image);
            $('#big_img').fadeIn('slow');
        });
    });
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2569238

复制
相关文章
jquery绑定事件的坑,重复绑定问题
我实现点击table表格中的删除按钮,找到当前按钮的祖先元素tr 然后删除该行,但是我首先点击删除的时候要先弹出提示框,是否要下载,这时在点击删除按钮删除,之前没有考虑到事件重复绑定问题,所以每次点击删除的时候就会多选择几行,之后选择的越来越多,经过网友解答,成功解决,先把重复绑定的删除的click事件解绑再继续绑定,就没问题。
蓓蕾心晴
2018/07/24
2.4K0
jquery+html 压缩图片
https://github.com/kingwsi/compress-pic/blob/master/index.html
有勇气的牛排
2023/06/25
2100
jQuery扩展以及gzip压缩测试
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb3212"> <title>javascript测试</title> <script type="text/javascript" src="http://files.cnblogs.com/yjmyzz/jquery-1.4.2.min.js"></script> <script type="text/ja
菩提树下的杨过
2018/01/22
8430
编写更好的jQuery代码
现在已经有很多文章讨论jQuery和JavaScript的性能问题,然而,在这篇文章中我计划总结一些提升速度的技巧和一些我自己的建议来改善你的jQuery和JavaScript代码。更好的代码意味着更快的应用程序,快速渲染和反应性意味着一个更好的用户体验。
跟着阿笨一起玩NET
2018/09/19
1.6K0
jQuery 图片轮播的代码分离
以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号。
小小许
2018/09/20
8.5K0
超实用的jQuery代码段
本书精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。本书的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用jQuery的各项技术,实现令人激动的网页效果。
用户3157710
2018/10/10
1.4K0
超实用的jQuery代码段
比较实用的jQuery代码段
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
奋飛
2019/08/15
1.8K0
JavaScript代码压缩细节
对于Javascript来说,提高网络下载的性能最直接的方法就是把JS文件体积减小。
慕白
2018/08/03
1.2K0
jquery 使用 unbind 解决重复绑定执行事件
在jquery监听click事件的时候会出现点击一次没有重复,点击第二次就重复的情况。出现这个问题的原因是之前的click事件被绑定后,并没有解绑。
Devops海洋的渔夫
2019/08/02
1.6K0
干掉 “重复代码” 的技巧有哪些
软件工程师和码农最大的区别就是平时写代码时习惯问题,码农很喜欢写重复代码而软件工程师会利用各种技巧去干掉重复的冗余代码。
每周聚焦
2023/01/03
4410
jQuery 实现图片下载代码jQuery 实现图片下载代码
jQuery 实现图片下载代码 function downloadImage(src) { var $a = $("<a></a>").attr("href", src).attr("download", "meitu.png"); $a[0].click(); } 关键调用downloadImage函数代码 onclick=downloadImage(url) 完整 js 代码 $(function () { $.extend($.fn.bootstrapTable.defaul
一个会写诗的程序员
2018/08/17
6.1K0
Nginx 静态压缩和代码压缩,提高访问速度!
但我们上班的心情,还是不能被这炎热的夏天所影响的,所以今天咋们来讲讲如何给前端访问加加速吧!!!
PHP开发工程师
2022/05/26
1.8K0
Nginx 静态压缩和代码压缩,提高访问速度!
iOS 图片压缩方法的示例代码
本篇文章主要介绍了iOS 图片压缩方法的示例代码,主要有两种压缩图片的方法,有兴趣的可以了解一下,有兴趣的可以了解一下。
很酷的站长
2022/11/28
1.7K0
iOS 图片压缩方法的示例代码
[编程题] 消除重复元素代码
小易有一个长度为n序列,小易想移除掉里面的重复元素,但是小易想是对于每种元素保留最后出现的那个。小易遇到了困难,希望你来帮助他。 输入描述: 输入包括两行: 第一行为序列长度n(1 ≤ n ≤ 50) 第二行为n个数sequence[i](1 ≤ sequence[i] ≤ 1000),以空格分隔
desperate633
2018/08/27
8400
10 个实用的jQuery 代码片段
1. 图片预加载    (function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement
用户7705674
2021/09/24
7020
如何编写高效的jQuery代码(转载)
1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合,尽量避免使用jQuery。
用户1518699
2018/10/11
7550
jQuery的Ajax实例(附完整代码)
作为一个前端刚入门没多久的小白,想在这里分享一下我的学习内容,就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程,所以遇到不懂得问题,也只有求助于网络,通过度娘,了解到了一些论坛、博客。在发现了众多技术大牛的同时,我也发现,一些像我这样的小白,由于能力有限,在查找相关资料的时候,对于大佬的一些操作理解困难,虽说能照猫画虎的做下来,但是可能自己也没有理解为什么要这么做。当然,我说的就是自己在查资料时曾经遇到的问题,这也是我写这篇笔记的主要原因。我下面就根据我自己的理解跟大家说说Ajax,如果大家看到什么问题,欢迎批评指正。
全栈程序员站长
2022/09/19
4.9K0
jQuery的Ajax实例(附完整代码)
自动加载jQuery的Javascript代码示例
当我们在Javascript里需要用到jQuery但又无法判断是否加载过时,可以通过下面的方法来自动判断并加载jQuery,代码如下:
魏杰
2022/12/23
9950
Retrofit 妙用,拒绝重复代码!
由于后台返回统一数据结构,比如 code, data, message; 使用过 Retrofit 的同学一定定义过类似 BaseResponse 这种类,但是 BaseResponse 的处理逻辑都大同小异, 每次都写着实让人很烦,有没有什么好的方式解决这一痛点呢?本文讲介绍一种优雅的方式 来解决这一问题。
用户9239674
2021/12/26
6990
点击加载更多

相似问题

如何压缩重复的jquery代码块

32

如何精简和压缩重复的jQuery代码

10

压缩重复的jquery

41

如何压缩这些jQuery代码以避免重复?

14

压缩重复jQuery函数

34
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文