-2

我在 jquery 中有一个函数，它在链接单击时显示图像，并且在再次单击链接时还必须隐藏图像。

这是代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
    var $j = jQuery.noConflict();
    $j(document).ready(function(){
        $j('.links').click( function(){
        var linkclicked = this.id;
        var url = $j(this).attr('href'),
        image = new Image();

        image.src = url;
        image.onload = function () {
              $j('#image-holder'+linkclicked).empty().append(image);
            /* The above line shows the image on first click.
               Adding slideToggle hides the image again  */
            };
            image.onerror = function () {
                $j('#image-holder'+linkclicked).empty()
                                .html('That image is not available.');
            }
            $j('#image-holder'+linkclicked).empty().html('Loading...');
            return false;
        });
    }); 
function loadnow() {

}
</script>
</head>
<body>
<?php $topicid=1; ?>
<a href="myimages/red-brick-wall-texture.jpg" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
<?php $topicid=2; ?>
<br><a href="/myimages/gymicon.JPG" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
</body>
</html>

请让我知道在哪里编写 slideToggle 以正确启用显示/隐藏功能。这里有两个链接显示单独的图像。单击时会显示它们，但问题是在下次单击时隐藏它们，并在再次单击时使它们
可见，依此类推。

4

1 回答 1

0

您在此处获取代码的方式并不完全适合.slideToggle. 您不应该将图像的 URL 放在元素的href属性中，<a>因为链接会在点击时尝试转到那里。

工作方式在文档页面.slideToggle上有很好的记录。您所要做的就是使用用于保存图像的 HTML 标签。然后在页面加载时将它们显示出来。您所要做的就是在链接点击事件上调用该函数。 <img>$().hide();.slideToggle()

请参阅此小提琴中带有一些杂项图片的工作示例：http: //jsfiddle.net/8xcZT/5/。

或者这里是您的代码的工作版本：http: //jsfiddle.net/JMXba/9/。我可以看到这可能是可取的等待点击加载图像。

祝你好运！

于 2012-08-27T13:02:19.587 回答