Обертка для блока
Сделал скрипт слайдера фильтра. У меня этих фильтров несколько. Все имеют одинаковую внутреннюю структуру. Мне нужно чтоб мой скрипт работал с каждым блоком по-отдельности. Можно ли использовать какую-то обёртку для блока одного фильтра чтоб мой скрипт отбирал элементы только внутри этого блока и чтоб мне не пришлось переписывать все условия отбора внутри скрипта(чтоб отбор дальше шел вида $("input[id$=min]"), $(".my-class") и т.д.) ? Или мне придется переделать отбор всего внутри на вид вроде
$(".block").each( function() { $(this).find("input[id$=min]")... $(this).find(".my-class")... |
Хоть бы пример какой тестовый сделал... А так - одна тарабарщина...
|
Цитата:
Есть 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"). Есть ли решение, при котором я их смогу оставить не меняя. |
zamanuha, а чем Вас не устраивает первый вариант скрипта. Он отрабатывается в своем блоке: http://jsbin.com/uqilar/1/
|
Спасибо Вам! Вы очень мне помогли! как я раньше этого не видел
|
Цитата:
<!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>
|
Цитата:
Что в итоге тебе хочется делать с ДИВами типа <div class="inner-N">...</div> Просто вскывать их при клике? |
Цитата:
Вот альтернативный вариант...
<!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>
|
Вот вариант с небольшим усложнением...
<!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>
|
Ну и вовсе так
$(document).ready(function () {
$(".block > div[class*='inner-']").click(function () {
$(this).hide();
});
});
|
| Часовой пояс GMT +3, время: 01:21. |