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（我觉得没有必要）。我什至正在寻找使用 ruby​​ 遍历图像目录来生成列表。

感谢您提供的任何方向。

4

2 回答 2

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 回答
0

我认为锚点是一件好事，即使关闭了javascript（或者如果某些原因导致它中断），它们也允许等效的功能，这可以作为一个很好的后备

于 2012-10-18T20:43:18.033 回答