2009-09-08 3 views
1

HTML:IE JQuery проблема

<div id="media-photo"> 
    <img src="/uploads/photos/16.jpg" alt="" /> 
</div> 
<a href="/uploads/photos/5.jpg" class="img"> 
    <img src="/uploads/photos-thumbs/5.jpg" alt="" /> 
</a> 
<a href="/uploads/photos/6.jpg" class="img"> 
    <img src="/uploads/photos-thumbs/6.jpg" alt="" /> 
</a> 

Jquery:

$(document).ready(function() { 
    $('a.img').click(function() { 
     var path = $(this).attr('href'); 

     $('#media-photo img').attr('src', path); 

     return false; 
    }); 
}); 

Объяснение:

Что выше код должен делать, когда вы нажимаете на якорь (с классом img), изображение в # media-photo div будет изменено на новое, основанное на атрибуте href привязки (href является относительным путем к изображению, он заменяет текущий src img at дань).

Он отлично работает в Firefox.

В IE (версия 8, в частности, я еще не тестировал старые версии), что происходит, когда при нажатии на якорь изображение открывается в браузере.

Как сделать эту работу в IE тоже?

EDIT:

Я решил эту проблему, используя попытку {} {}, наконец, чтобы убедиться, что функция возвращает ложь (чтобы предотвратить поведение по умолчанию). Вот весь код JQuery (я упростил его значительно выше, чтобы не путать людей с неуместной вещи):

$(document).ready(function() { 
    $('.box-content2 a.img').click(function() { 
     var path = $(this).attr('href'); 
     var title = $('img', this).attr('alt'); 
     var description = jQuery.trim($(this).attr('title')); 
     var id = $(this).attr('id'); 

     if (id != $('#media-photo img').attr('id')) { 

      try { 

       $('#media-photo img').attr('src', path); 
       $('#media-photo img').attr('alt', title); 
       $('#media-photo img').attr('id', id); 

       $('#content h2:first').text('You Are Viewing "' + title + '"'); 
       $('title').text('You Are Viewing "' + title + '"'); 

       if (description.length > 0) { 
        $('#content .box-container:first').removeClass('invisible'); 
        $('#content .box-container:first p').text(description); 
       } else { 
        $('#content .box-container:first').addClass('invisible'); 
       } 

       var action = '/view/favoriting-form/id/' + id; 

       $.get(action, function(data) { 
        if ($('.favoriting').length > 0) { 
        $('.favoriting').replaceWith(data); 
        } else { 
         $('#actions h3').after(data); 
        } 
       }); 

       action = '/view/rating-form/id/' + id; 

       $.get(action, function(data) { 
        if ($('.rating').length > 0) { 
         $('.rating').replaceWith(data); 
        } else { 
         if ($('.favoriting').length > 0) { 
          $('.favoriting').after(data); 
         } else { 
          $('#actions h3').after(data); 
         } 
        } 
        $('.star').rating(); 
       }); 

       action = '/view/add-media-comment/id/' + id; 

       $.get(action, function(data) { 
        $.getScript('/js/photo.js'); 
        $('#media-comments').html(data); 
       }); 

      } finally { 

       return false; 
      } 

     } 

     return false; 
    }); 
    $('#add_to_favorites').hover(function() { 
     var id = $('#media-photo img').attr('id'); 
     var action = '/view/photo/id/' + id; 
     $('.favoriting').attr('action', action); 
    }); 
    $('#rate-button').hover(function() { 
     var id = $('#media-photo img').attr('id'); 
     var action = '/view/photo/id/' + id; 
     $('.rating').attr('action', action); 
    }); 
    $('a.previous-media, a.next-media').click(function() { 
     var id = $('#media-photo img').attr('id'); 
     var href = $(this).attr('href'); 
     href = href.split('/'); 
     var p = href[href.length - 1]; 
     var url = '/view/album-photos/id/' + id + '/p/' + p; 

     $.get(url, function(data) { 
      $.getScript('/js/photo.js'); 
      $('.box-content2').html(data); 
     }); 

     return false; 
    }); 
    $('#media-comments form').submit(function() { 
     var id = $('#media-photo img').attr('id'); 
     var url = '/view/add-media-comment/id/' + id; 

     var postData = $(this).serialize() + '&add_comment=Submit'; 
     $.post(url, postData, function(data) { 
      $.getScript('/js/photo.js'); 
      $('#media-comments').html(data); 
     }); 

     return false; 
    }); 
}); 
+0

Ваш упрощен пример работает для меня в IE7. Вы пытались запустить этот реальный код выше в IE8 или просто более сложную версию? – ScottE

+0

Ваш код работает для меня в обоих IE8 с режимом совместимости и без него. Однако он НЕ работает для меня в Firefox, который перемещается к изображению, а не загружает его в тег img. –

+0

Я решил проблему уже ребята (с помощью try {} finally {} block, так что даже если что-то пойдет не так, в js он все равно возвращает false). –

ответ

1

В этой строке:

if (id != $('#media-photo img').attr('id')) { 

Где id родом?

+0

Я снял эту строку. Это на самом деле происходит от якоря (каждый якорь имеет атрибут id, разметка более сложная, поэтому я как можно более упростил ее), как этот var id = $ (this) .attr ('id'); –

+0

Просто, чтобы уточнить, что это не проблема, конечно, я проверил идентификатор с предупреждением, и он имеет правильное значение, я также попытался удалить условие if, и проблема сохраняется. –

+0

Я решил проблему с помощью try {} finally {}, проверьте исходное сообщение, я его обновил. –

1

Хм, попробуйте это быстро и скажите мне, если это работает:

$(document).ready(function() { 
    $('a.img').click(function(ev) { 
     var path = $(this).attr('href'); 

     $('#media-photo img').attr('src', path); 
     ev.preventDefault(); 
     return false; 
    }); 
}); 
+0

Нет, это не сработает. –

+0

Что-то еще происходит, я просто бросил ваш код на тестовую страницу, и он отлично работает в IE8.Можете ли вы дать нам больше информации? – Steerpike

+0

Я решил проблему с помощью try {} finally {}, проверьте исходное сообщение, я его обновил. –