26.10.2018, 20:49
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
|
Zhenyaxxxx,
изменить то надо всего пару значений, знать бы на что менять,а так можно только гадать.
|
|
26.10.2018, 21:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
Zhenyaxxxx,
от вас требовалось содержимое строк 34 - 37 ... !!!
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.diametr_form label{
display: table-row;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var checkbox = $('[name="diametr"]'), block = $(".prom_vents~#product");
block.hide();
checkbox.change(function() {
var cls = "" + $.map(checkbox.filter(":checked"), function(el) {
return '[class~="'+el.value+'"]'
});
block.hide().filter(cls).show();
});
});
</script>
</head>
<body>
<form method="post" action="" class="diametr_form"><label></label>
<label><input type="checkbox" name="diametr" value="100" class="d100" />100 мм</label>
<label><input type="checkbox" name="diametr" value="125" class="d125" />125 мм</label>
<label><input type="checkbox" name="diametr" value="150" class="d150" />150 мм</label>
</form>
<h2 class="prom_vents">вентиляторы</h2>
<div id="product" class="100">100</div>
<div id="product" class="125">125</div>
<div id="product" class="150">150</div>
</body>
</html>
|
|
26.10.2018, 23:22
|
|
Кандидат Javascript-наук
|
|
Регистрация: 25.10.2018
Сообщений: 102
|
|
|
Фильтр по чекбоксам
Вот код..... теперь будет понятней...... Хочу упростить js код, как вы делали до этого в примере, но оставить логику привязки сортировки по значению по фразе из массива $raketa.... Буду вам очень благодарен
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#diametr_form label{ display: table-row; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('document').ready(function(){
$('#diametr_form~#my_model').hide();
$(".d100").change(function() { $('#diametr_form~#my_model[*!*class~="100"*/!*]').hide(500);
if(this.checked) { $('#diametr_form~#my_model[class~="100"]').show("slow");
} else { $('#diametr_form~#my_model[class~="100"]').hide(500); }
});
$(".d125").change(function() {
$('#diametr_form~#my_model[class~="125"]').hide(500);
if(this.checked) { $('#diametr_form~#my_model[class~="125"]').show("slow");
} else { $('#diametr_form~#my_model[class~="125"]').hide(500); }
});
$(".d200x400").change(function() {
$('#diametr_form~#my_model[class~="200*400"]').hide(500);
if(this.checked) { $('#diametr_form~#my_model[class~="200*400"]').show("slow");
} else { $('#diametr_form~#my_model[class~="200*400"]').hide(500); }
});
});
</script>
</head>
<body>
<form method="post" action="" id="diametr_form">
<label><input type="checkbox" class="d100" />100 мм</label>
<label><input type="checkbox" class="d125" />125 мм</label>
<label><input type="checkbox" class="d200x400" />200*400 мм</label>
</form>
<?php
$raketa = array('Первый 100', 'Второй 100', 'Ура 125', 'Опять 125', 'Еще 150', 'Раз 150', ',kf 200*400', 'gg 200*400');
$index=0;
$elements = count ($raketa);
while($index < $elements){ ?>
<div id="my_model" *!* class="<?= $raketa[$index]; ?>" */!* style="display:block; width:10em; border:1px solid red;"><?= $raketa[$index]; ?></div><br/>
<?php $index++;
}
?>
</body>
</html>
Последний раз редактировалось Zhenyaxxxx, 27.10.2018 в 07:55.
|
|
27.10.2018, 00:16
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
|
Zhenyaxxxx,
испорченный телефон ... уже несколько постов ... напишите html код ваших блоков, иначе я не могу вам помочь!!!
4 строки, да одного блока бы хватило!!!
|
|
27.10.2018, 00:22
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
рони,
не волнуйтесь, вы так 
Zhenyaxxxx
в браузере нажмите f12 -> Elements в окне код отрендеренной страницы
найдите нудный блок правой кнопкой Copy -> Copu OuterHTML
|
|
27.10.2018, 07:31
|
|
Кандидат Javascript-наук
|
|
Регистрация: 25.10.2018
Сообщений: 102
|
|
Добавил в код сверху run, чтоб можно было запустить его но он почему то не работает (чекбокы есть, но не выводят значения), хотя на сайте (под формой 3 чекбокса https://ensy.com.ua/?page=contacti )у меня все ок... не знаете почему? Выделил жирным ДИВ, которые выводится циклом... а сверху в js строчку, где ищу совпадение в классе...
Последний раз редактировалось Zhenyaxxxx, 27.10.2018 в 08:07.
|
|
27.10.2018, 08:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
|
Zhenyaxxxx,
возможно проблема понимания в том что вы пишите php, а вас просят результат работы php - html код - чтобы понять какая у вас струтура DOM.
и примеры здесь на форуме тоже не работают с php.
в checkbox можно value добавить?
|
|
27.10.2018, 08:45
|
|
Кандидат Javascript-наук
|
|
Регистрация: 25.10.2018
Сообщений: 102
|
|
|
конечно можно, главная цель это сократить js и оставить возможность фильтровать по части значения из массива $raketa[$index];
|
|
27.10.2018, 08:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,129
|
|
Zhenyaxxxx,
скрипт один и тотже, во всех постах, главное правильно вписать селекторы, согласно вашей структуре.
добавлено value в checkbox, тащить в классы описание не самый лучший метод.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.diametr_form label{
display: table-row;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var checkbox = $('#diametr_form input:checkbox'), block = $('#diametr_form~#my_model');
block.hide();
checkbox.change(function() {
var cls = "" + $.map(checkbox.filter(":checked"), function(el) {
return '[class~="'+el.value+'"]'
});
block.hide().filter(cls).show();
});
});
</script>
</head>
<body>
<form method="post" action="" id="diametr_form">
<label><input type="checkbox" value="100" class="d100" />100 мм</label>
<label><input type="checkbox" value="125" class="d125" />125 мм</label>
<label><input type="checkbox" value="200*400" class="d200x400" />200*400 мм</label>
</form>
<div id="my_model" class="Первый 100" style="display:block; width:10em; border:1px solid red;">Первый 100</div><br/>
<div id="my_model" class="Второй 100" style="display:block; width:10em; border:1px solid red;">Второй 100</div><br/>
<div id="my_model" class="Ура 125" style="display:block; width:10em; border:1px solid red;">Ура 125</div><br/>
<div id="my_model" class="Опять 125" style="display:block; width:10em; border:1px solid red;">Опять 125</div><br/>
<div id="my_model" class="Еще 150" style="display:block; width:10em; border:1px solid red;">Еще 150</div><br/>
<div id="my_model" class="Раз 150" style="display:block; width:10em; border:1px solid red;">Раз 150</div><br/>
<div id="my_model" class=",kf 200*400" style="display:block; width:10em; border:1px solid red;">,kf 200*400</div><br/>
<div id="my_model" class="gg 200*400" style="display:block; width:10em; border:1px solid red;">gg 200*400</div><br/>
</body>
</html>
|
|
27.10.2018, 10:03
|
|
Кандидат Javascript-наук
|
|
Регистрация: 25.10.2018
Сообщений: 102
|
|
Чудеса) все работает))) Огромнейшее спасибо))  |
|
|
|
