переменная jQuery undefined с php включает

Question

Я пытаюсь использовать переменную в jQuery, которая включена в php, attr rel of img в нижнем колонтитуле.

Я пытаюсь использовать его для изменения attr src в том же img в нижнем колонтитуле.

если я использую его без включения, то он работает. Но с включением это не так.

В результате я всегда получаю ../img/undefined.svg.

Как я могу получить это ./img/facebook.svg или ../img/twitter.svg?

В моем PHP-файл, я использую:

<?php include '../include/header.php';?> 
<?php include '../include/footer.php';?> 

В header.php является JavaScript, JQuery и HTML:

<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" type="text/css" href="../css/stijl.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("footer img").hover(
      function(){ 
       var src = $(this).attr('rel'); 
      $(this).attr('src', '../img/' + src + '-n.svg'); 
       } 
     , 
     function(){ 
      var src = $(this).attr("rel"); 
      $(this).attr('src', '../img/' + src + '.svg'); 
     } 
     ); 
    }); 
</script> 

В footer.php только HTML:

<footer> 
    <div class="content"> 
     <a rel="twitter" href="#"> 
      <img src="../img/twitter.svg"> 
     </a> 
     <a rel="facebook" href="#"> 
      <img src="../img/facebook.svg"> 
     </a> 
    </div> 
</footer> 

Answer 1

$(this) относится к тегу img, который не имеет атрибута rel. Однако его родительский тег. Попробуйте:

var src = $(this).parent().attr('rel'); 

или если разметка может немного измениться, это может быть более надежными:

var src = $(this).closest('a').attr('rel');