Создание изображений, которые изменяются вместе с другим объектом.

0

Вот мой полный тестовый HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Table</title>

<script  type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="Untitled_1.js"></script>

</head>

<body>

<div id="sidebar">
    <table id="table1">
        <tr>
            <th>Table</th>
        </tr>
        <tr>
            <td>
                <a rel="img1">Link1</a>
            </td>
            <td>
                <a rel="img2">Link2</a>
            </td>            
        </tr>
    </table>
</div>

<div id="box">
    <img src="cant-believe-it-icon.png" id="img1"/>
    <img src="too-much-icon.png" id="img2"/>
</div>

</body>

</html>

Для этой тестовой страницы нет CSS, и вот весь файл.js:

$('a').click(function(){
    imgid = $(this).attr('rel');
    $('a').removeClass('active');
    $(this).addClass('active');

    $('img').hide();    
    $('#'+imgid).fadeIn('slow');
});

Когда это выполняется в jsfiddle (без заголовка, тела, html-тегов и т.д.), Он отлично работает - когда один из них нажат, появляется одно изображение, а другое - нет. Однако, когда весь код помещается в веб-версии Microsoft и просматривается, ничего не происходит, когда ссылки нажимаются. Это проблема с моей привязкой файла.js к html? и как я должен это исправить?

  • 0
    Для получения дополнительной помощи, при запуске в jsfiddle, пока не будет нажата одна из <td>, оба изображения будут видны. Как настроить так, чтобы при запуске было видно только первое изображение?
Теги:

1 ответ

1
Лучший ответ

Загрузите свои скрипты в конце тега body или поместите свой код в событие onload окна.

$(function() {
    $('a').click(function(){
      imgid = $(this).attr('rel');
      $('a').removeClass('active');
      $(this).addClass('active');

      $('img').hide();    
      $('#'+imgid).fadeIn('slow');
    });
})

Из документов jQuery

Нельзя безопасно манипулировать страницей, пока документ не будет готов. jQuery определяет это состояние готовности для вас. Код, включенный внутри $ (document).ready() будет запускаться только после того, как страница Document Object Model (DOM) готова для выполнения кода JavaScript. Код, включенный внутри $ (window).load(function() {...}), будет запускаться после того, как будет готова вся страница (изображения или фреймы), а не только DOM.

Поделиться
  • 0
    Но я подумал, что мог бы просто иметь внешний файл и ссылку на него в <head>?
  • 0
    Да, но это означает , что ваш сценарий будет загружен до DOM существует, так что вы не найдете ни a тег , чтобы связать ваше событие щелчка.
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню