найти div после ссылки с помощью JQuery

sudoku_online

Привет, У меня есть простой HTML с JQuery:

 <p><a href="#form_here_1" data-id="my-order">order1</a></p>


<div class="myform">I am first</div>


<p><a href="#form_here_2" data-id="my-order">order2</a></p>


<div class="myform">I am second</div>


<script type="text/javascript">


$(".myform").hide();


$("a[data-id='my-order']").click(function() {


//alert("click");


// $(this).find("div").show();


});


</script>

Код (разметка): Моя задача: Когда пользователь нажимает на ссылку, отображается соответственно «Я первый» или «Я второй». Начнем с того, что это скрытые элементы div.

JQuery немного устарел — 1.4.2 Если написать $(this).siblings('.myform').text() без вокруг ссылок, скрипт будет работать корректно.

Как их избежать ... Спасибо!

lerapolinina

Попробуйте пройтись по DOM, т.е. от привязки , в абзац как обертку привязки, затем в как следующий брат:

 $('a[data-id="my-order"]').click(function() {

$(this).parent().next().show();
});

Код (JavaScript):

asimut

Если вас не волнует возможность отображения/скрытия IE8/более ранних версий, вам больше не нужен JS для этого. Хотя я должен спросить, что делает одно слово грамматическим абзацем? Также не уверен, почему вы тратите время на атрибуты данных...

 /* hide the checkbox in all browsers */


.showCheckbox {


position:absolute;


left:-999em;


}


.showCheckbox + label,


.showCheckbox + label + div {


display:block;


padding-bottom:0.5em;


}


/* cute trick for targeting CSS3 browsers only */


@media (min-width:1px) {


.showCheckbox + label:after {


content:"+";


display:inline-block;


line-height:1.5em;


width:1.5em;


margin-left:0.4em;


text-align:center;


background:#CCC;


}


.showCheckbox:checked + label:after {


content:"-";


}


.showCheckbox + label + div {


display:none;


}


.showCheckbox:checked + label + div {


display:block;


}


} /* min-width:1px */

Код (разметка): Тогда для CSS что-то вроде:

 <input type="checkbox" id="order1" class="showCheckbox"> <label for="order1">Order 1</label> <div>I Am First</div> <input type="checkbox" id="order2" class="showCheckbox"> <label for="order2">Order 2</label> <div>I Am Second</div>

Код (разметка): используя флажок в качестве триггера в CSS3, вы можете показать/скрыть его без использования каких-либо сценариев.

Поместив в медиазапрос часть display:none и видимую часть управления, браузеры до CSS3 будут показывать их как всегда открытые... ИМХО, сейчас именно там должна быть поддержка до IE9, они не получают причудливых наворотов, ХОРОШО.

Могут ли они получить доступ к контенту? Достаточно хорошо! Это связано с чем-то, что я разместил на своем сайте всего несколько дней назад:
http://www.cutcodedown.com/tutorial/mobileMenu

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

Это одна из причин, почему я считаю более 90% кодовой базы jQuery устаревшим мусором, который следует выбросить в мусорное ведро.

НЕ то, чтобы я видел ЛЮБОЕ законное оправдание для использования ЛЮБОЙ из этих мусорных «фреймворков», будь то JS, HTML или CSS...

Хотя даже если бы я сделал это с помощью сценариев, это был бы огромный беспорядок для того, с чем мне пришлось бы справиться с помощью простой ловушки onclick и замены классов в родительском контейнере.

Похожие темы	Дата
Jnewsbar - Jquery Floating News Ticker Bar	19.10.2024, 18:10
[lynda.com] Javascript Основной Курс, На Русском.	19.10.2024, 18:10
[itvdn] Видео Курс Angularjs Essential	19.10.2024, 18:10
[Степан Суворов, Игорь Непипенко] Продвинутый курс по Angular (2018)	19.10.2024, 18:10
[шп] Javascript Жариков Препод	19.10.2024, 18:10
Mastering JavaScript (2016)	19.10.2024, 18:10
[шп] Javascript Жариков Препод (2014)	19.10.2024, 18:10
[geekbrains] Node.js Серверное Программирование На Javascript	19.10.2024, 18:10
Javascript — простой измеритель надежности пароля	19.10.2024, 18:10
Lynda.com - Создание мобильных web-приложений на jQueryMobile (2014)	19.10.2024, 18:10

найти div после ссылки с помощью JQuery

sudoku_online

lerapolinina

asimut

I AM

Интересно