Обход DOM с помощью jQuery
Щелкнув 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
Хорошее место для поиска - это Visual jQuery Docs в разделе селекторы: http://screencasts.visualjquery.com/
Я думаю, ты пытаешься сделать что-то вроде
$ (это) .parent (). next ('. hidden');
внутри вашей функции onClick?
Надеюсь, это поможет!
У вас есть несколько вариантов:
$('.expand').click(function () {
$(".record").toggle();
});
или же
$('.expand').click(function () {
$(".record").slideToggle("slow");
});
Хотя, если вы собираетесь настроить таргетинг на следующий div на основе его релевантности для выбранного img, вам необходимо настроить его с помощью .parent ('span'). Parent ('div'). Next ('record' )
Думаю, ему нужно применить переключение к следующей записи, а не ко всем.
Более чистый подход состоит в том, чтобы переключать родительский класс изображения между свернутым и развернутым, тогда в вашем CSS вы можете использовать контекстные селекторы, чтобы скрыть вложенные блоки div внутри свернутых.
Только мои 2 цента.
потребовал некоторого размышления и последующего подтверждения ответа, чтобы понять то, о чем вы имели в виду .... Я согласен, и я исследую этот тип решения ... спасибо за сообщение
Вот рабочий пример:
<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.
Аллен прав, лучше работать только с родителем, а затем использовать селекторы 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>
Если вас беспокоит постепенная деградация, вам нужно добавить блок <noscript> с <style> .hidden {display: block; } </style> в нем. Обратите внимание, что, к сожалению, ссылка на файл noscript.css внутри блока noscript не работает, его нужно встроить в <head>.
Это то, что я использую в настоящее время, спасибо Адаму ... но я также изучу предложение Аллена.
$(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') ;
});
});
fwiw, я поддержал предложение Аллена, потому что оно звучит хорошо. Я думаю, он должен привести пример кода.
Проблема с этим решением заключается в том, что вы застряли в точности с глубиной вложенности и родственными отношениями, которые есть в вашем примере. Если вы когда-нибудь влезете глубже (div прадеда?) Или добавите или измените порядок братьев и сестер (см. Мой пример), ваш код необходимо скорректировать.
Мое решение работает независимо от порядка братьев и сестер или от расстояния до предков.
настоящая проблема в том, что я не очень хорошо задал свой вопрос. это решение всегда будет соответствовать моим потребностям в моем текущем проекте. Я вернусь (и вернусь) к этим ответам, чтобы изучить дальнейшие концепции. Я поддержал ответ Пистоса и пересмотрю его в будущем. Спасибо за ответы на все вопросы
CarolinaJay65: Спасибо, что разместили свое решение. Я только начинаю с jQuery / HTML / CSS, и это действительно хорошо сработало.