0

私はhttp://icon.stornge.comでギャラリーに取り組んでいます。ここで意図されている機能は、ユーザーがホームページのリンクをクリックし、最初の画像が表示され、ユーザーが画像、次の制限ロード、というように最後の画像まで続きます。

代わりに何が起こっているかというと、最初のクリックで画像が読み込まれ、最初にスライバー、次に完全な画像が読み込まれます (これは画像に対する意図された動作jQuery.load('slow')ですか? </a>)。次に、最初の画像をクリックすると、イベント ハンドラーが呼び出されます (期待どおりにalert()表示されますが、最初の画像はその場所にとどまり、2 番目の画像は表示されません。Chrome のコンソールは JavaScript エラーを記録しません。

jQuery のイベント処理と.hide()との間に相互作用はあり.show()ますか? 初期 CSS " display: none" などで問題が発生していますか?

ある画像をクリックすると次の画像が読み込まれるようにするには、何を変更すればよいですか?

4

3 に答える 3

2

まず、動作しますが（驚くべきことに、Chromeでのみ）、プロトコルはすべて小文字にする必要があります（JavaScript:ではなくjavascript:)。次に、（href内のすべてのスクリプトコードの後で）falseを返さないhref usingスクリプトは、問題を引き起こす可能性があります。

とにかく、次を使用してください。

1-画像を表示するトリガーとなる画像とリンクにクラス（例：「image-toggle」）を適用します。クラス「アイコン」をアンカーに追加します。

2-現在のhrefを＃またはjavascript：returnfalseに変更します。

3-画像からIDを削除します（W3C HTML仕様では、ID値は英字で始まる必要があると明確に規定されています。数字を使用できますが、IDを数字で始めることはできません）。

4-（オプション）すべての画像（回転する）を新しいDIV（「画像」と呼びます）に配置します。

このコードをページに（スクリプトブロックで）追加します。

(function($){
  var imageIndex = 0;
  $(function(){
    var $homepage = $("#homepage"), 
        $images = $(".icon");
    $images.click(function(event){
      event.preventDefault();
      $homepage.hide("slow");
      $images.hide().eq(imageIndex++).show("slow");
    });
  });
})(jQuery);
于 2012-07-31T00:13:03.327 に答える
0

このフィドルを見てください。ページを整理する合理的な方法を示します。お役に立てば幸いです。

コードは次のとおりです。

var currentIcon = -1;
function nextIcon() {
    currentIcon = currentIcon % 3 + 1;
    $('#icons img')
       .attr('src', $('#iconlibrary img:eq(' + currentIcon + ')').attr('src'));
}

$('#leftpanel a').on('click', function() {
    if ($(this).parent().hasClass('disabled')) { return; }
    $(this)
        .blur()
        .parent()
        .addClass('selected')
        .siblings()
        .removeClass('selected');                  
    $('#' + $(this).data('id'))
    .show()
    .siblings()
    .hide();
    return false;
});

$('#icons a').on('click', nextIcon);
nextIcon();

うーん、あなたがゆっくりとしたフェードインを望んでいることに気づきました。考えさせてください。また、クリックしたときに画像がアクティブな選択枠を取得するという小さな問題もあります。使いやすさが気になる場合は、リンクを残してサーバーに送信すると、正しい画像が表示された新しいページが表示されます。次に、javascript で、ページの読み込み時にリンクを取り除き、代わりにimgクリック ハンドラーと CSS ポインター スタイルを備えたプレーン タグを使用して手を表示します。

私がこれを取り入れた方向性が気に入ったらお知らせください。もっとお手伝いできるようにいたします。

PSこんにちはジョナサン。またお会いできて光栄です。いつの日か、私たちの (非常に古い、非常に陳腐な) 会話への返答を得るでしょう。

于 2012-07-31T00:39:36.297 に答える
0

ちらつきが気になるのは、おそらく、最初の画像を表示し始めるまでホームページを非表示にしなかったためです。.fadeIn('slow')代替手段として試すことも検討できます。

また、dom の準備ができたら、他のクリック ハンドラーをバインドする必要があります。aスクリプトを要素の href から移動し、すべてを以下のコードを含む 1 つのスクリプト タグに移動することをお勧めします。jQuery.next()メソッドを使用して次のアイコンにアクセスできるため、要素にインデックスを付ける必要はありません。

私が修正/変更したHTMLにはいくつかの問題もあります。これが効果のデモです。

HTML:

<html>
    <head>
        <title>Icon Library</title>
        <style>
            /*...*/
        </style>
    </head>
    <body>
        <div id="homepage">
        <h1>Icon Library</h1>
        <p><del>Favorites</del><br>
        <a href="#" id="icons">Browse icons</a><br>
        <a href="http://JonathansCorner.com/">by CJSH</a><br>
        </p>
        </div>
        <img class="icon" src="icon/icon0.png">
        <img class="icon" src="icon/icon1.png">
        <img class="icon" src="icon/icon2.png">
        <img class="icon" src="icon/icon3.png">
        <script>
            /*...*/
        </script>
</body></html>

Javascript:

$(document).ready(function() {
    $("#icons").click(function(e) {
        e.preventDefault();
        $('#homepage').hide();
        $('img.icon:first').show('slow');
    });
    $('img.icon').click(function() {
        $(this).hide();
        $(this).next('img').show();
    });
});​
于 2012-07-31T00:34:53.247 に答える