Скрыть/показать все блоки div с таким же классом как в selection - JavaScript, Ajax

rdfhnbhf · 19.07.2012, 20:16

помогите с простым скриптом, можно только под IE, решение на Jquery приемлемо
есть html такой структуры
<DIV id=content>
<DIV id=b1 class="myclass a01 20120720">текст</DIV>
<DIV id=b2 class="myclass a02 20120720">текст1</DIV>
<DIV id=b3 class="myclass a01 20120720">текст2</DIV>
<DIV id=b4 class="myclass a02 20120720">текст3</DIV>
</DIV>
Что нужно от скрипта?

Допустим выделили на странице текст2. Класс у этого divа - а01. Нажимаем на клавиатуре Ins - показываются только записи
<DIV id=b1 class="myclass a01 20120720">текст</DIV>
<DIV id=b3 class="myclass a01 20120720">текст2</DIV>
т.к. у обеих класс а01, остальные скрыты - (this).hide
Нажали еще раз ins - показался весь контент страницы.

Выделили текст1, класс у этого div а02, Нажимаем на клавиатуре Ins, показались только записи
<DIV id=b2 class="myclass a02 20120720">текст1</DIV>
<DIV id=b4 class="myclass a02 20120720">текст3</DIV>

rlib · 19.07.2012, 20:47

A откуда вы знаете, что скрипт - простенький?

rdfhnbhf · 19.07.2012, 21:08

Код:

$('div.myclass').each(function(){
      var re = new RegExp($('#q').val(), 'i');
      if($(this).text().match(re)){
        $(this).show();
      }else{
        $(this).hide();
      };
    });

Это нашел в интернете. Осталось вместо myclass подставить а01 или а02 в зависимости от того в каком из div выделен текст

rlib · 19.07.2012, 21:50

Ну, вы нашли вообще непонятно что.
А вот решение. Совсем простенько? Для вас наверно да.

Код:

<html>
<head>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script>
		var InsertKeyCode = 45;
		var selCls = "";
		var hidden = false;
		function get_selected() {
			var t = '';
			if (window.getSelection) {
				t = window.getSelection();
			} 
			else if (document.getSelection) {
				t = document.getSelection();
			} 
			else if(document.selection) {
				t = document.selection.createRange().text;
			}
			return t;
		}
		$(document).ready( function() {
			$(document).bind("keypress", function(event) {
				if (event.keyCode == InsertKeyCode) {
					if (hidden) {
						$("." + selCls).show();
						selCls = "";	
						hidden = false;
					}
					else {
						if ( selCls != "") {						
							$("." + selCls).hide();							
							hidden = true;
						}
					}										
				}
			});
			
			$("#content > div").bind('mouseup', function() {
				if (!hidden) {					
					if (get_selected() != "" ) {					
						selCls = $(this).attr("class");					
					}
					else {
						selCls == "";
					}
				}
			});
		});
	</script>
</head>
<body>
	<DIV id="content">
		<DIV id=b1 class="a01">текст</DIV>
		<DIV id=b2 class="a02">текст1</DIV>
		<DIV id=b3 class="a01">текст2</DIV>
		<DIV id=b4 class="a02">текст3</DIV>
	</DIV>

</body>
</html>

rdfhnbhf · 19.07.2012, 22:14

Огромное спасибо Вам за труд, rlib Признаю, задача не из простых

Но правда два момента Вы все таки не учили:
1. скрипт почему то не работает в IE у меня 8 версия (хотя в Mozilla OK)

2. классы все таки записаны вот так:
class="myclass a01 20120720"
где 1-ый идентифицирует текущий html документ
2 -ой блок в html документе определенного содержания
3-й = дату последней модификации записи в этом блоке
Поэтому такой вариант $(this).attr("class"); оказался не работоспособным

И все таки почему скрипт не запустился в IE?

Будет возможность, покажите что откорректировать в скрипте.

Но все равно, я приятно удивлен, что на этом форуме мне ответили. Спасибо.

Naive · 20.07.2012, 00:36

1. вы не сказали под каким ИЕ не работает (я бы на них ваще не оглядывался, ибо это 13% пользователей, причем 7% из них юзают ИЕ8-, который еще идет с jScript, а не JavaScript).
2. внутренняя часть скрипта идет без ООП, так что ИЕ не к чему придраться (в целом) попробуйте поставить в начале скрипта "use script" (вместе с кавычками) и поправьте то, но что ругается фаерфокс.

rlib · 20.07.2012, 00:43

"2. классы все таки записаны вот так:":
Исправлено.

Код:

<html>
<head>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script>
		var InsertKeyCode = 45;
		var selCls = "";
		var hidden = false;
		function get_selected() {
			var t = '';
			if (window.getSelection) {
				t = window.getSelection();
			} 
			else if (document.getSelection) {
				t = document.getSelection();
			} 
			else if(document.selection) {
				t = document.selection.createRange().text;
			}
			return t;
		}
		$(document).ready( function() {
			$(document).bind("keypress", function(event) {
				var selector;
				if (event.keyCode == InsertKeyCode) {
					if (hidden) {						
						selector = "." + selCls.replace(/ /g, ".");												
						$(selector).show();
						selCls = "";	
						hidden = false;
					}
					else {
						if ( selCls != "") {						
							selector = "." + selCls.replace(/ /g, ".");							
							$(selector).hide();							
							hidden = true;
						}
					}										
				}
			});
			
			$("#content > div").bind('mouseup', function() {
				if (!hidden) {
					if (get_selected() != "" ) {					
						selCls = $(this).attr("class");							
					}
					else {
						selCls == "";
					}
				}
			});
		});
	</script>
</head>
<body>
	<DIV id="content">
		<DIV id=b1 class="myclass a01 20120720">текст</DIV>
		<DIV id=b2 class="myclass a02 20120720">текст1</DIV>
		<DIV id=b3 class="myclass a01 20120720">текст2</DIV>
		<DIV id=b4 class="myclass a02 20120720">текст3</DIV>
	</DIV>

</body>
</html>

rlib · 20.07.2012, 00:45

"И все таки почему скрипт не запустился в IE?"

Не знаю

Под Линуксом ИЕ вообще нет

rlib · 20.07.2012, 00:55

что на этом форуме мне ответили
Очень хороший форум. Я считаю, один из лучших.

19.07.2012, 20:16	#1
rdfhnbhf Регистрация: 05.07.2012 Сообщений: 6	Скрыть/показать все блоки div с таким же классом как в selection помогите с простым скриптом, можно только под IE, решение на Jquery приемлемо есть html такой структуры <DIV id=content> <DIV id=b1 class="myclass a01 20120720">текст</DIV> <DIV id=b2 class="myclass a02 20120720">текст1</DIV> <DIV id=b3 class="myclass a01 20120720">текст2</DIV> <DIV id=b4 class="myclass a02 20120720">текст3</DIV> </DIV> Что нужно от скрипта? Допустим выделили на странице текст2. Класс у этого divа - а01. Нажимаем на клавиатуре Ins - показываются только записи <DIV id=b1 class="myclass a01 20120720">текст</DIV> <DIV id=b3 class="myclass a01 20120720">текст2</DIV> т.к. у обеих класс а01, остальные скрыты - (this).hide Нажали еще раз ins - показался весь контент страницы. Выделили текст1, класс у этого div а02, Нажимаем на клавиатуре Ins, показались только записи <DIV id=b2 class="myclass a02 20120720">текст1</DIV> <DIV id=b4 class="myclass a02 20120720">текст3</DIV>

19.07.2012, 21:08	#3
rdfhnbhf Регистрация: 05.07.2012 Сообщений: 6	Код: `$('div.myclass').each(function(){ var re = new RegExp($('#q').val(), 'i'); if($(this).text().match(re)){ $(this).show(); }else{ $(this).hide(); }; });` Это нашел в интернете. Осталось вместо myclass подставить а01 или а02 в зависимости от того в каком из div выделен текст

20.07.2012, 00:36	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	1. вы не сказали под каким ИЕ не работает (я бы на них ваще не оглядывался, ибо это 13% пользователей, причем 7% из них юзают ИЕ8-, который еще идет с jScript, а не JavaScript). 2. внутренняя часть скрипта идет без ООП, так что ИЕ не к чему придраться (в целом) попробуйте поставить в начале скрипта "use script" (вместе с кавычками) и поправьте то, но что ругается фаерфокс. Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
php скрипт, который поможет скрыть нежелательные блоки(модули)	Predator199	PHP	12	02.02.2012 20:22
Показать\скрыть два разных DIV	kutt	JavaScript, Ajax	5	06.03.2011 12:33
В блоке DIV не выравниваются внутренние блоки	Southerner	HTML и CSS	2	21.09.2010 22:28
как скрыть/показать TMainMenu	blackstersl	Общие вопросы Delphi	3	13.06.2009 18:12
Блоки div вместо td, как сделать две колонки одинаковой высоты?	v.victoria12345	HTML и CSS	0	06.05.2009 18:05

19.07.2012, 20:47	#2
rlib Форумчанин Регистрация: 22.05.2012 Сообщений: 352	A откуда вы знаете, что скрипт - простенький?

19.07.2012, 22:14	#5
rdfhnbhf Регистрация: 05.07.2012 Сообщений: 6	Огромное спасибо Вам за труд, rlib Признаю, задача не из простых Но правда два момента Вы все таки не учили: 1. скрипт почему то не работает в IE у меня 8 версия (хотя в Mozilla OK) 2. классы все таки записаны вот так: class="myclass a01 20120720" где 1-ый идентифицирует текущий html документ 2 -ой блок в html документе определенного содержания 3-й = дату последней модификации записи в этом блоке Поэтому такой вариант $(this).attr("class"); оказался не работоспособным И все таки почему скрипт не запустился в IE? Будет возможность, покажите что откорректировать в скрипте. Но все равно, я приятно удивлен, что на этом форуме мне ответили. Спасибо.

20.07.2012, 00:45	#8
rlib Форумчанин Регистрация: 22.05.2012 Сообщений: 352	"И все таки почему скрипт не запустился в IE?" Не знаю Под Линуксом ИЕ вообще нет

20.07.2012, 00:55	#9
rlib Форумчанин Регистрация: 22.05.2012 Сообщений: 352	что на этом форуме мне ответили Очень хороший форум. Я считаю, один из лучших.