0

更新:次のようなjqueryに取り組んでいます:

$(document).ready(function(){
    $('li img').hover(
        var src = $(this).attr('src')
        function(){
            $('#big').html('<img src=' + src + '/>');
        },
        function(){
            $('#big').html("");
        }
        );
});

それはうまくいきませんでした...しかし、これはうまくいきました：

$(document).ready(function(){
    $('#li img').hover(

        function(){
            $('#big').html('<img src=' + $(this).attr("src") + '/>');
        },
        function(){
            $('#big').html("");

        }

        );


});

しかし、src 変数の使い方が正しくありません。また、これを配列またはハッシュに変換して反復しようとしています。最終的に、大きなボックスはサムネイルを繰り返し処理し、ユーザーがリスト要素にカーソルを合わせると、繰り返しが停止し、カーソルを合わせたリスト項目の大きなバージョンが表示されます。まず、この部分を機能させる必要があります。

ありがとう！

サムネイルを含むリストがあります。サムネイルの上を移動すると、別の div にフルスクリーンの画像が表示されます。私はそれを行うための最もクリーンな方法で少し引き裂かれています。最後に醜い解決策を投稿しますが、最初に、私が行きたいと思う方向性を示したいと思います。

html:

<ul>
  <li><%= image_tag('rails.png') %>Some text</li>
  <li><%= image_tag('rails.png') %>Some text</li>
  <li><%= image_tag('rails.png') %>Some text</li>
</ul>
<div id='big'></div>

まず最初に; サムネイルとテキストが変更されます。次の形式のjqueryを使用しようとしています:

$('li').hover(function(){

 $('#big').append("<img src="'+ this.img.src + '" />");
});

this.img.src は私が失敗している場所です。

私の意見では、実用的なソリューションは非常に醜く、次のようなhtmlを使用しています。

<ul>
  <li><a href='assets/rails.png"><%= image_tag('rails.png') %>Some text</a></li>
  <li><a href='assets/rails.png"><%= image_tag('rails.png') %>Some text</a></li>
  <li><a href='assets/rails.png"><%= image_tag('rails.png') %>Some text</a></li>
</ul>
<div id='big'></div>

次のようなjquery：

$("#big").append("<p id='preview'><img src='"+ this img.src +"' alt='Image preview' />"+ c +"</p>");

機能する実用的なソリューションを十分に投稿していません。誰もがアイデアを得るのに十分です。

では、どうすればそのゴミを片付けることができるでしょうか。リンクタグのない最初の html を使用したいと思います (必要ではないと思います)。画像のディレクトリを反復処理するルビーでリストを生成することさえ考えています。

あなたが提供できる方向性をありがとう。

4

2 に答える 2

0

アンカーは良いものだと思います。JavaScriptがオフになっている場合でも（または何かが原因で壊れた場合でも）同等の機能を使用できるため、フォールバックが良好になります。

于 2012-10-18T20:43:18.033 に答える
0

You can simply change the src attr of the img tag but it will need to load the pic everytime you change picture.

<ul>
  <li><a onclick="$('#bigPic').attr({'src':'someothepic1.png'});">Some text</a></li>
  <li><a onclick="$('#bigPic').attr({'src':'someothepic2.png'});">Some text</a></li>
  <li><a onclick="$('#bigPic').attr({'src':'someothepic3.png'});">Some text</a></li>
</ul>
<div id='big'>*<img id="bigPic" scr="somepic.png"/>*</div>

There is other way, more heavy, complex of doing this, but this oneliner sould do the trick.If you have only a few pic, you could load them all, hidden and only show the one you want.

btw .append() will ADD to the content as .html() will replace it.

于 2012-10-18T20:37:34.990 に答える