无法调用自定义插件

Can't call custom plugin

本文关键字：插件 自定义 调用      更新时间：2023-09-26

我在调用自定义插件时遇到问题。插件 enlargeImage 根本没有从 imageSwap jQuery 代码中调用。我是新手，仍在学习js。在这一点上，我不确定我做错了什么。任何帮助或指导:)

插件代码

(function($){
    $.fn.enlargeImage = function() {
        return this.each(function() {
            alert("This is working!");
            // preload images
            $("#image_list a").(function() {
                var swappedImage = new Image();
                swappedImage.src = $(this).attr("href");
            });
                // set up event handlers for links    
            $("#image_list").find("a").click(function(evt) {
                // swap image
                var imageURL = $(this).attr("href");
                $("#image").attr("src", imageURL);
                //swap caption
                var caption = $(this).attr("title");
                $("#caption").text(caption);
                // cancel the default action of the link
                evt.preventDefault();  // jQuery method that's cross-browser compatible
            }); // end click
            // move focus to first thumbnail
            $("li:first-child a:first-child").focus();
        });
    }
})(jQuery);

jquery 代码

$(document).ready(function() {
        $('#image_list').enlargeImage();
}); // end ready

目录

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Swap</title>
    <link rel="stylesheet" href="main.css" />
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="jquery.imageSwap.js"></script>
    <script src="image_swap.js"></script>

</head>
<body>
    <section>
        <h1>Ram Tap Combined Test</h1>
        <ul id="image_list">
            <li><a href="images/h1.jpg" title="James Allison: 1-1">
                <img src="thumbnails/t1.jpg" alt=""></a></li>
            <li><a href="images/h2.jpg" title="James Allison: 1-2">
                <img src="thumbnails/t2.jpg" alt=""></a></li>
            <li><a href="images/h3.jpg" title="James Allison: 1-3">
                <img src="thumbnails/t3.jpg" alt=""></a></li>
            <li><a href="images/h4.jpg" title="James Allison: 1-4">
                <img src="thumbnails/t4.jpg" alt=""></a></li>
            <li><a href="images/h5.jpg" title="James Allison: 1-5">
                <img src="thumbnails/t5.jpg" alt=""></a></li>
            <li><a href="images/h6.jpg" title="James Allison: 1-6">
                <img src="thumbnails/t6.jpg" alt=""></a></li>
        </ul>
        <h2 id="caption">James Allison: 1-1</h2>               
        <p><img src="images/h1.jpg" alt="" id="image"></p>
    </section>  
</body>

尝试替换此代码

$("#image_list a").(function() {
    var swappedImage = new Image();
    swappedImage.src = $(this).attr("href");
});

自 

$("#image_list a").each(function() {
    var swappedImage = new Image();
    swappedImage.src = $(this).attr("href");
});
相关文章：