Как я могу скрыть строку и заменить ее кнопкой просмотра / скрытия, используя jQuery? - PullRequest
Новая
       1

Как я могу скрыть строку и заменить ее кнопкой просмотра / скрытия, используя jQuery?

1 голос
/ 16 июля 2010

У меня есть поле, которое динамически заполняется. Я знаю, что первые несколько слов строки всегда будут:

Заказ был отредактирован вручную:

Далее следует список всех внесенных изменений. Этот список иногда может быть несколько длинным.

Я хочу скрыть список изменений и заменить его кнопкой с надписью «Нажмите, чтобы просмотреть изменения». Когда пользователь нажимает кнопку, он отображает список изменений над кнопкой и изменяет текст кнопки на «Скрыть изменения».

Мой мыслительный процесс состоял в том, чтобы использовать функцию jquery, чтобы найти «Порядок был вручную отредактирован:», а затем выбрать остальную часть строки и сохранить ее в переменной, затем мне нужно заставить ее скрыть всю строку и показать Выше строка вместе с кнопкой. Когда пользователь нажимает кнопку, он просто переключает строку, которая была сохранена в переменную (список изменений).

Я ищу строку

.note_message

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

Ответы [ 2 ]

1 голос
/ 16 июля 2010

Если у вас есть контроль над выводом страницы, то лучший способ сделать это - просто создать div или span или что-то подобное, что вы хотите скрыть. 

<span id="editsToHide">These are my edits</span>

И тогда вылегко найти это с помощью $('#EditsToHide')

http://jsfiddle.net/8q8ds/ - пример кода, который вы хотите (возможно, его можно сделать более стильно и аккуратно, но это подтверждение концепции, которая заставит вас задуматься)правильное направление.

Примечание. Я также добавил в материал, чтобы он работал в браузерах, отличных от JS, так как CSS скрывает кнопку, а не изменения, а затем javascript скрывает изменения и показывает кнопки.он будет показывать данные всегда, а не скрывать их без возможности добраться до них.:)

Редактировать:

Чтобы сделать это без контроля над разметкой, вынужно добавить в собственную разметку.Я сделал новую скрипку на основе старой: http://jsfiddle.net/8q8ds/2/. Ключевой новый код: 

var messageText = $('.note_message').html()
var staticText = 'The order was manually edited:<br/>';
var dynamicText = messageText.substring(staticText.length-1);
var newHTML = staticText + '<span id="editsToHide">'+dynamicText+'</span>'
$('.note_message').html(newHTML);

Вы можете видеть, что он находит содержимое вашего диапазона "note_message" (примечаниеесли есть более одного из этих неожиданных действий, может произойти).Затем он отсекает известную часть, чтобы получить неизвестную часть (вы можете выполнить некоторую проверку, чтобы убедиться, что отбитый бит действительно соответствует ожидаемому в случае изменений в выводимом HTML).Затем он создает новый HTML-код с диапазоном, чтобы придать ему формат, как описано выше, а затем продолжить, как и раньше.

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

Редактировать 2: Только что обновленовторой jsfiddle, так как я понял, что не добавляю кнопку динамически.

0 голосов
/ 16 июля 2010

Почему бы просто не обернуть ваши правки в какой-нибудь контейнер? Затем просто спрячьте его с помощью JavaScript, чтобы люди без него тоже могли наслаждаться вашим списком правок.

Пример кода: 

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#edits').css('display', 'none');
                $('#show.button').css('display', 'inline');
                $('.button').click(
                    function() {
                        $('#edits, .button').toggle();
                    }
                );
            });
        </script>
        <style type="text/css">
            .button {
                display: none;
            }
        </style>
    </head>
    <body>
        The order was manually edited:
        <input type="submit" value="Click to View Edits" id="show" class="button" />
        <input type="submit" value="Hide Edits" id="hide" class="button" />
        <p id="edits">
            Some edits.
        </p>
    </body>
</html>
...