JQuery получить IMG SRC с переменной?

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');
                }               
            });

        });

Вам необходимо определить переменную imgSrc вне функции события mouseover, потому что, когда вы пытаетесь применить ее к 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/