Циклическое отображение и скрытие функции в jquery - PullRequest
Новая
       20

Циклическое отображение и скрытие функции в jquery

0 голосов
/ 22 марта 2012

Я пытаюсь показать и скрыть текст на сайте.Но я должен пройти через XML-файл и получить все элементы.Я ужасно объясняю, так что вот это на jsfiddle: http://jsfiddle.net/liveandream/3P2b6/

Это не работает для каждого отдельного элемента.Когда вы нажимаете на кнопку «читать дальше», она заставляет оба идти вниз, а при закрытии заставляет оба возвращаться вверх.Количество результатов, которые я получу, узнать практически невозможно.Я надеюсь, что кто-то может помочь мне.Заранее спасибо!

Ответы [ 3 ]

1 голос
/ 22 марта 2012

Проблема в том, что вы присоединяете функцию щелчка к #read2, и есть два элемента с идентификатором read2. Обратите внимание, что элемент должен иметь уникальный идентификатор в документе, но это другое обсуждение.

Всякий раз, когда вы нажимаете на элемент, он должен найти элемент, чтобы свернуть или закрыть. Например, когда я нажимаю read1, он должен открываться или закрываться amenities1, а когда я нажимаю read2, он должен открываться или закрываться amenities2. Это означает, что вам придется переименовать идентификаторы и классы, чтобы это работало.

Вы можете получить число, выполнив следующие действия: при нажатии на элемент получить его идентификатор в виде строки и получить номер из этой строки. Затем создайте идентификатор или класс элемента, который вы хотите открыть или закрыть (выполнив amenities + число), и откройте / закройте его.

0 голосов
/ 22 марта 2012

http://jsfiddle.net/3P2b6/3/

Исправлено для вас.Возможно, не так оптимизирован, как может быть, но должен работать нормально.

0 голосов
/ 22 марта 2012

Как насчет jsFiddle, пример ?Единственное изменение в HTML, которое я сделал, сделало идентификаторы уникальными (первое чтение2 теперь читается1).

jQuery: 

$(".amenities").hide();
$('.readMore').click(function() {
    if ($(this).next().is(':visible')) {
        $(this).next().hide();
        $(".arrow",this).html("►");
    } else {
        $(this).next().show();
        $(".arrow",this).html("▼");
    }
});​

HTML: 

<div class="amenitiesWrap">
    <div class="readMore" id="read1"> <span class="arrow">►</span> See Room Amenities</div>
    <div class="amenities"><p>Donec mollis imperdiet lacus ut rhoncus. Pellentesque tincidunt leo vitae mauris varius ut mattis erat condimentum. Donec non tellus ut augue rutrum dignissim vitae eu nibh. Nunc vitae lacinia lectus. Aliquam erat volutpat. Sed quis placerat dolor. Morbi tempus tellus quis eros iaculis posuere. Vivamus a risus nisl. Quisque non turpis massa, vitae mollis urna. Etiam placerat quam eget purus pellentesque rhoncus commodo lorem placerat. Ut in justo enim. Mauris vitae sem eros. Ut aliquam bibendum nulla quis posuere. Maecenas est quam, scelerisque adipiscing laoreet sed, lobortis ac eros. Donec consectetur augue vel nunc rutrum vestibulum.<br />
<div class="closeAmenities">Hide Amenities</div></p>
    </div>
</div>

<div class="amenitiesWrap"><div class="readMore" id="read2"> <span class="arrow">►</span> See Room Amenities</div><div class="amenities"><p>Donec mollis imperdiet lacus ut rhoncus. Pellentesque tincidunt leo vitae mauris varius ut mattis erat condimentum. Donec non tellus ut augue rutrum dignissim vitae eu nibh. Nunc vitae lacinia lectus. Aliquam erat volutpat. Sed quis placerat dolor. Morbi tempus tellus quis eros iaculis posuere. Vivamus a risus nisl. Quisque non turpis massa, vitae mollis urna. Etiam placerat quam eget purus pellentesque rhoncus commodo lorem placerat. Ut in justo enim. Mauris vitae sem eros. Ut aliquam bibendum nulla quis posuere. Maecenas est quam, scelerisque adipiscing laoreet sed, lobortis ac eros. Donec consectetur augue vel nunc rutrum vestibulum.<br />
<div class="closeAmenities">Hide Amenities</div></p></div></div>​
...