Форум

zamanuha · #1 (**permalink**) 01.10.2012, 12:32

Сделал скрипт слайдера фильтра. У меня этих фильтров несколько. Все имеют одинаковую внутреннюю структуру. Мне нужно чтоб мой скрипт работал с каждым блоком по-отдельности. Можно ли использовать какую-то обёртку для блока одного фильтра чтоб мой скрипт отбирал элементы только внутри этого блока и чтоб мне не пришлось переписывать все условия отбора внутри скрипта(чтоб отбор дальше шел вида $("input[id$=min]"), $(".my-class") и т.д.) ? Или мне придется переделать отбор всего внутри на вид вроде
$(".block").each( function() {
$(this).find("input[id$=min]")...
$(this).find(".my-class")...

ksa · #2 (**permalink**) 01.10.2012, 15:25

Хоть бы пример какой тестовый сделал... А так - одна тарабарщина...

zamanuha · #3 (**permalink**) 01.10.2012, 16:41

Сообщение от ksa

Хоть бы пример какой тестовый сделал... А так - одна тарабарщина...

Упростил для понимания проблемы
Есть HTML

<div class="block">
  <div class="inner-1">
  </div>
  <div class="inner-2">
  </div>
</div>
<div class="block">
  <div class="inner-1">
  </div>
  <div class="inner-2">
  </div>
</div>

Есть скрипт (понято, что у меня больше и сложней, из-за чего не хочется перелопачивать весь)

$(".inner-1").click(function () {
      $(this).hide();
});
$(".inner-2").click(function () {
      $(this).hide();
});

Мне его нужно заставить отрабатывать каждый в своем блоке и при этом по возможности не изменять селекторы элементов. Решение типа этого(может оно и не рабочее, но мысль будет понятна):

$(".block").each(function(){
  $(this).find(".inner-1").click(function () {
      $(this).hide();
  });
  $(this).find(".inner-2").click(function () {
      $(this).hide();
  });
});

не подходит, так как нужно переделывать все селекторы $(".inner-1") -> $(this).find(".inner-1"). Есть ли решение, при котором я их смогу оставить не меняя.

antonM · #4 (**permalink**) 01.10.2012, 19:56

zamanuha, а чем Вас не устраивает первый вариант скрипта. Он отрабатывается в своем блоке: http://jsbin.com/uqilar/1/

zamanuha · #5 (**permalink**) 01.10.2012, 23:06

Спасибо Вам! Вы очень мне помогли! как я раньше этого не видел

ksa · #6 (**permalink**) 02.10.2012, 08:58

Сообщение от zamanuha

Упростил для понимания проблемы
Есть HTML

<div class="block">
  <div class="inner-1">
  </div>
  <div class="inner-2">
  </div>
</div>
<div class="block">
  <div class="inner-1">
  </div>
  <div class="inner-2">
  </div>
</div>

Есть скрипт (понято, что у меня больше и сложней, из-за чего не хочется перелопачивать весь)

$(".inner-1").click(function () {
      $(this).hide();
});
$(".inner-2").click(function () {
      $(this).hide();
});

Но это вообще не работает...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(".inner-1").click(function () {
      $(this).hide();
});
$(".inner-2").click(function () {
      $(this).hide();
});
</script>
</head>
<body>
<div class="block">
  <div class="inner-1">1.1
  </div>
  <div class="inner-2">1.2
  </div>
</div>
<div class="block">
  <div class="inner-1">2.1
  </div>
  <div class="inner-2">2.2
  </div>
</div>
</body>
</html>

ksa · #7 (**permalink**) 02.10.2012, 09:01

Сообщение от zamanuha

Мне его нужно заставить отрабатывать каждый в своем блоке

С умением объяснять у тебя явно проблемы...

Что в итоге тебе хочется делать с ДИВами типа

<div class="inner-N">...</div>

Просто вскывать их при клике?

ksa · #8 (**permalink**) 02.10.2012, 09:05

Сообщение от zamanuha

Решение типа этого(может оно и не рабочее, но мысль будет понятна):

$(".block").each(function(){
  $(this).find(".inner-1").click(function () {
      $(this).hide();
  });
  $(this).find(".inner-2").click(function () {
      $(this).hide();
  });
});

Подход конечно ппц!

Вот альтернативный вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function () {
	$(".block > div").each(function(){
	  $(this).click(function () {
	      $(this).hide();
	  });
	});
});
</script>
</head>
<body>
<div class="block">
  <div class="inner-1">1.1
  </div>
  <div class="inner-2">1.2
  </div>
</div>
<div class="block">
  <div class="inner-1">2.1
  </div>
  <div class="inner-2">2.2
  </div>
</div>
</body>
</html>

ksa · #9 (**permalink**) 02.10.2012, 09:11

Вот вариант с небольшим усложнением...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function () {
	$(".block > div[class*='inner-']").each(function(){
	  $(this).click(function () {
	      $(this).hide();
	  });
	});
});
</script>
</head>
<body>
<div class="block">
  <div class="inner-1">1.1
  </div>
  <div class="inner-2">1.2
  </div>
</div>
<div class="block">
  <div class="inner-1">2.1
  </div>
  <div class="inner-2">2.2
  </div>
</div>
</body>
</html>

ksa · #10 (**permalink**) 02.10.2012, 09:12

Ну и вовсе так

$(document).ready(function () {
	$(".block > div[class*='inner-']").click(function () {
		$(this).hide();
	});
});

Форум

Справочник

Discord чат

Курсы javascript