Обход DOM с использованием jQuery - PullRequest
Новая
       13

Обход DOM с использованием jQuery

2 голосов
/ 06 ноября 2008

После нажатия на IMG я хотел бы перейти к следующему DIV, чтобы содержимое DIV можно было отображать или скрывать в зависимости от текущего состояния отображения.

Это фрагмент HTML: 

<div>
  <span class="expand"><img src="images/plus.gif"></span>
  <span>Subject Heading</span>
</div>
<div class="record hidden">Display or Hide this text</div>

У меня есть код (, предоставленный в другом ответе на этом сайте ) для выполнения этого в таблице. Я бы установил прослушиватель событий для img или содержащего диапазона? не знаете, как использовать функции parent (), next (), sibling (), чтобы обойти ....

Кроме того, как вы проверяете, подходит ли ваша навигация к нужному элементу? Вы можете использовать оповещение для отображения идентификатора или значения?

Любая помощь приветствуется Спасибо

Ответы [ 6 ]

4 голосов
/ 06 ноября 2008

Более чистый подход заключается в переключении класса родительского изображения между свернутым и развернутым, тогда в вашем CSS вы можете использовать контекстные селекторы, чтобы скрыть вложенные дивы внутри свернутых.

Только мои 2 цента.

2 голосов
/ 06 ноября 2008

Вот рабочий пример: 

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

<div>
  <span class="expand"><img src="x.jpg"></span>
  <span>Subject Heading</span>
</div>
<div class="record hidden">Display or Hide this text</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('.expand img').toggle(
        function(){
            $(this).parent().parent().next().hide();
        },
        function(){
            $(this).parent().parent().next().show();
        });
    });
</script>

Обратите внимание, что я дважды использую parent, потому что к изображению добавляется событие, чьим родителем является диапазон, а родительским - div.

1 голос
/ 06 ноября 2008

Это то, что я сейчас использую, спасибо Адам ... но я также изучу предложение Аллена. 

$(function(){
$('.expand img').toggle(
    function(){
        $(this).parent().parent().next().show();
        $(this).attr('src', 'images/minus.gif') ;
    },
    function(){
        $(this).parent().parent().next().hide();
        $(this).attr('src', 'images/plus.gif') ;
    });
});
1 голос
/ 06 ноября 2008

Аллен правильный, лучше работать только с родителем, затем использовать CSS-селекторы, чтобы показать или скрыть дочерние элементы, перевернуть +/- изображения и т. Д. Но в любом случае здесь - это функциональный код, который делает то, что вы хотите, как вам было интересно: 

<html>

<head>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  <script type="text/javascript">
    $( document ).ready( function() {
        $( '.expand img' ).click(
            function() {
                $(this).parents( 'div' ).eq( 0 ).siblings( '.record' ).eq( 0 ).toggleClass( 'hidden' );
            }
        );
    } );
  </script>

  <style type="text/css">
    .hidden {
        display: none;
    }
  </style>

</head>

<body>

  <div>
    <span class="expand"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></span>
    <span>Subject Heading</span>
  </div>
  <div class="other">Don't care about this</div>
  <div class="record hidden">Display or Hide this text</div>

</body>

</html>
1 голос
/ 06 ноября 2008

Хорошее место для поиска - документация Visual jQuery под селекторами: http://screencasts.visualjquery.com/

Я думаю, вы пытаетесь сделать что-то вроде

$ (это) .parent () следующий ( 'скрытый'.).

внутри вашей функции onClick?

Надеюсь, это поможет!

0 голосов
/ 06 ноября 2008

У вас есть несколько вариантов: 

$('.expand').click(function () {
  $(".record").toggle();
});

или 

$('.expand').click(function () {
  $(".record").slideToggle("slow");
});

Хотя, если вы собираетесь настраивать таргетинг на следующий div в зависимости от его релевантности для кликаемого img, вам нужно настроить таргетинг на .parent ('span'). Parent ('div'). 'запись')

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...