Question

我在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以正确启用显示/隐藏功能。这里有两个链接显示单独的图像。单击时会显示它们，但问题是在下次单击时隐藏它们并使它们成为
再次点击时可见，等等。

Answer 1

你在这里使用代码的方式并不适合.slideToggle。您不应该将图片的网址放在href元素的<a>属性中，因为该链接会尝试点击该链接。

.slideToggle的工作方式已在docs page中详细记录。您所要做的就是使用HTML <img>标记，该标记用于保存图像。然后在页面加载时$().hide();它们，这样就不会显示它们。您只需要在链接点击事件上调用.slideToggle()函数即可。

请参阅这个小提琴中的一些misc图片的工作示例：http://jsfiddle.net/8xcZT/5/。

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

祝你好运！

如何在此函数中实现正确的show hide / slideToggle功能

1 个答案: