HTML: jQuery: DOM-манипуляция

Я ленив. Там! Это в стороне.HTML: jQuery: DOM-манипуляция

У меня есть список предметов неопределенной длины, которые я бы хотел отобразить в HTML. Я хочу показать часть каждого элемента, а затем добавить ссылку «показать больше» в каждом элементе, который отобразит больше элемента. Поскольку ссылка «показать больше» реализует ту же функциональность, я привязал одну и ту же функцию обработчика кликов к «показать больше ссылок», которая затем отображает диапазон HTML, который содержит скрытый текст. Мой код выглядит следующим образом:

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
</head> 
<body> 
<p>List of stuff</p> 
<ul> 
    <li> One <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about One </span></li> 
    <li> Tow <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about Two </span></li> 
    <li> Three <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about Three </span></li> 
</ul> 
<script type="text/javascript"> 

    $(document).ready(function() { 
     $(".showmore_link").click(show_more_toggle); 
    }); 

    show_more_toggle=function(){ 
     $(".showmore").slideToggle(); 
    } 

</script> 
</body> 
</html>

При нажатии кнопки «Показать больше» ссылки, он показывает все три пролетов класса «showmore». Как я могу настроить обработчик кликов «show_more_toggle», чтобы он только раскрывал диапазон в том же элементе списка?

CONSTRAINT: Я не могу использовать атрибуты «id» на пролетах или элементах списка по другим причинам.

источник

2011-10-12 Jay Godse

другое решение:..

$(document).ready(function() { 
    $(".showmore_link").click(function() { 
     $(this).parent().children(".showmore").slideToggle(); 
    }); 
});

http://jsfiddle.net/A7fM5/

источник

2011-10-12 13:51:43 alexl

Это решение работало лучше всего для меня, потому что в непродуманном случае он более общий, «showmore» span разделяет родителя с «showmore_link», но не всегда является родным братом. Спасибо. –

Try -

show_more_toggle=function(){ 
    $(this).siblings(".showmore").slideToggle(); 
}

Demo - http://jsfiddle.net/ipr101/9GB9u/

источник

2011-10-12 13:47:46 ipr101

$('a.showmore_link').click(function() { 
    $(this).next().show(); 
});

источник

2011-10-12 13:47:52 Blazemonger

или '$ (это) .hide() следующее() шоу();', если вы хотите избавиться от теперь уже бесполезных ссылок в то же время. – Blazemonger

Использование next() - это поможет вам охватить элемент.

источник

2011-10-12 13:49:18 Bizniztime

HTML: jQuery: DOM-манипуляция

ответ

Смежные вопросы