Как скрыть строку и заменить ее с помощью кнопки view/hide с помощью jQuery?

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

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

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

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

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

Строка поиска Я в это

.note_message

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

источник

2010-07-16 zeckdude

Небольшой образец с соответствующим HTML поможет много. –

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

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

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

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

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

Edit:

Чтобы сделать это без контроля разметки вам необходимо добавить в своей собственной разметке. Я сделал новую скрипку, основанную на старой: 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, так как понял, что я не динамически добавляю кнопку.

источник

2010-07-16 09:47:44 Chris

Ваш код выглядит действительно хорошо, за исключением того, что у меня нет контроля над используемой мной строкой. Вот почему я хочу выделить весь текст после строки «Заказ был отредактирован вручную» и сохранить его в переменной. Как я могу это сделать первым? – zeckdude

@zeckdude: В этом случае нам нужно больше узнать о структуре вашей страницы. Информация, которую вы нам предоставили, позволит нам найти, где начать поиск строки, чтобы показать/скрыть, но у нас нет информации о том, как мы найдем конец этой строки. Покажите нам HTML в этом разделе страницы, и мы можем помочь вам найти способ найти то, что вы хотите. – Chris

Заказ был отредактирован вручную:
Список изменений находится здесь, и это может быть несколько длинное иногда Это пример структуры html, в которой находится строка. Это всегда тот же класс, и он всегда начинается с этой строки. – zeckdude

Почему бы просто не обернуть ваши правки в какой-нибудь контейнер? Затем просто спрячьте его с помощью 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>

источник

2010-07-16 09:49:13

Как скрыть строку и заменить ее с помощью кнопки view/hide с помощью jQuery?

ответ

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