-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を書く場所を教えてください。ここには、別々の画像を表示する2つのリンクがあります。クリックすると表示されますが、問題は次のクリックで非表示
にし、もう一度クリックすると表示されるようにすることです。

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 に答える