Question

我已经阅读过100多个关于此问题的主题，但无论我做什么，我都无法像我想的那样做。我的问题是我从img src="url"获取了script。当我提醒它时它给了我想要的正确输入，但是当我把它放在attr()标签中时，我只是发布了“imgSrc”并且在图片的路径中。当我在鼠标悬停功能中硬编码图像时，它可以正常工作。

继承我的剧本

  <script>
    $(document).ready(function(){

            //Hides the images
            $('#imgwrap img').hide();

            //Create variables for Link & Images
            $('a.imgflash').mouseover(function(){
                var linkRel     =   $(this).attr('rel');

                $('#imgwrap img').each(function(i,ele){
                    if($(this).attr('rel') == linkRel) {
                        var imgSrc      =   $(this).attr('src');
                    }               
                });

            });

            //Script that makes images apears
            //Mouseover Script
            $('a.imgflash').mouseover(function(){           
                $('#imgwrap img').attr("src", imgSrc).show();
            });
        });
    </script>

继承我的HTML

<ul>
    <li><a rel="demo1" class="imgflash" href="#">demo1</a></li>
    <li><a rel="demo2" class="imgflash" href="#">demo2</a></li>
    <li><a rel="demo3" class="imgflash" href="#">demo3</a></li>
</ul>
<div id="imgwrap" style="width:300px; height:300px; overflow:hidden;">
<img rel="demo1" src="images/lux.jpg">
    <img rel="demo2" src="images/cover.jpg">
    <img rel="demo3" src="images/cover2.jpg">
</div>

我希望你能帮助我如何让我的变量“imgSrc”像我想要的那样在我的鼠标悬停功能中发布。

Answer 1

        var imgSrc = '';
        //Create variables for Link & Images
        $('a.imgflash').mouseover(function(){
            var linkRel     =   $(this).attr('rel');

            $('#imgwrap img').each(function(i,ele){
                if($(this).attr('rel') == linkRel) {
                    imgSrc      =   $(this).attr('src');
                }               
            });

        });

您需要在mouseover事件函数之外定义imgSrc变量，因为当您尝试将其应用于attr时，它不存在。

您可以在此处阅读有关本地/全局变量的更多信息：

http://www.w3schools.com/js/js_variables.asp

Answer 2

无需两个鼠标悬停处理程序。让你的第一个做两个工作：

$(document).ready(function() {

    //Hides the images
    $('#imgwrap img').hide();

    //Create variables for Link & Images
    $('a.imgflash').mouseover(function() {
        var linkRel = $(this).attr('rel');

        $('#imgwrap img').each(function(i, ele) {
            if ($(this).attr('rel') == linkRel) {
                $(this).show();
            }
        });

    });
});

或者更好：

$(document).ready(function() {

    //Hides the images
    $('#imgwrap img').hide();

    //Create variables for Link & Images
    $('a.imgflash').mouseover(function() {
        var linkRel = $(this).attr('rel');
        $('#imgwrap img[rel="'+linkRel+'"]').show();
    });
});

http://jsfiddle.net/mblase75/J6aLJ/

jQuery使用变量获取img src？

2 个答案: