Question

更新：我正在研究一些看起来像这样的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遍历图像目录生成列表。

感谢您提供的任何指示。

Answer 1

您可以简单地更改img标签的src attr，但每次更换图片时都需要加载图片。

<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>

还有其他方式，更重，更复杂的这样做，但这个oneliner可以做到这一点。如果你只有几张照片，你可以加载所有，隐藏，只显示你想要的。

btw .append（）会添加内容，因为.html（）会替换它。

Answer 2

我认为锚点是一件好事，即使关闭javascript（或者如果某些事情导致它破坏），它们也允许相同的功能，从而实现良好的回退

rails jquery悬停在li元素上以填充另一个div

2 个答案: