Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Поместить однотипные input "checkbox" для сортировки в цикл (https://javascript.ru/forum/jquery/75628-pomestit-odnotipnye-input-checkbox-dlya-sortirovki-v-cikl.html)

Zhenyaxxxx 25.10.2018 17:58
Поместить однотипные input "checkbox" для сортировки в цикл
 
Здравствуйте всем!!
Сделал вот такую группу чекбоксов для сортировки вентиляторов:

<form method="post" action="" class="diametr_form">
<input type="checkbox" name="diametr" value="100" class="d100" />100 мм<br/>
<input type="checkbox" name="diametr" value="125" class="d125" />125 мм<br/>
<input type="checkbox" name="diametr" value="150" class="d150" />150 мм<br/>
</form>

И оброботчик события выбора в чекбоксе для каждого инпута.

$(".prom_vents~#product").hide();
$(".d100").change(function() { $('.prom_vents~#product[class~="100"]').hide(500);
if(this.checked) { $('.prom_vents~#product[class~="100"]').show("slow");
} else { $('.prom_vents~#product[class~="100"]').hide(500); }
});
$(".d125").change(function() {
$('.prom_vents~#product[class~="125"]').hide(500);
if(this.checked) { $('.prom_vents~#product[class~="125"]').show("slow");
} else { $('.prom_vents~#product[class~="125"]').hide(500); }
});
$(".d150").change(function() {
$('.prom_vents~#product[class~="150"]').hide(500);
if(this.checked) { $('.prom_vents~#product[class~="150"]').show("slow");
} else { $('.prom_vents~#product[class~="150"]').hide(500); }
});


Помогите из этого длинного кода js сделать код который будет выбирать переменную по класу или по value, возможно циклом.... Сижу голову ломаю...

рони 25.10.2018 18:11
Zhenyaxxxx,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 25.10.2018 18:36
checkbox фильтрация по классу
 
Zhenyaxxxx,
<!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 > div");
block.hide();
checkbox.change(function() {
 var cls = "" + $.map(checkbox.filter(":checked"), function(el) {
    return 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=".d100" class="d100" />100 мм</label>
<label><input type="checkbox" name="diametr" value=".d125" class="d125" />125 мм</label>
<label><input type="checkbox" name="diametr" value=".d150" class="d150" />150 мм</label>
 </form>
<div class="prom_vents">
    <div  class="d100">100</div>
    <div  class="d125">125</div>
    <div  class="d150">150</div>
</div>
</body>
</html>

Zhenyaxxxx 26.10.2018 16:48
Рони, огромное вам спасибо за идею....

https://javascript.ru/forum/project/...ki-v-cikl.html

но.... пытаюсь внедрить в свой код и не совсем получается.... Дело в том что у меня выдача блоков с содержимым, происходит из БД циклом While. Например вот этот селектор $('.prom_vents~#product[class~="100"]') выбирал все div в названии модели которых есть цифра 100....Их много.... Может подскажите как мне переделать ваш код, если будете так же добры как и раньше))))

рони 26.10.2018 17:13
Цитата:
Сообщение от Zhenyaxxxx
$('.prom_vents~#product[class~="100"]')
не могу представить данную структуру в нормальном html!
напишите ваш минимальный html.

Zhenyaxxxx 26.10.2018 17:51
Фильтр по чекбоксам
 
Здесь я выбираю все из базы и вставляю циклом в div:

$result = mysql_query(" SELECT *  FROM `product` WHERE `brand`='Вентс' ");
$row = mysql_fetch_assoc($result);
while($row = mysql_fetch_assoc($result)){
?>
<div id="product" class="<?= $row['model']; ?>" >
</div>


Тут ищу совпадение слова или цифры в модели, например в модели ВКОМ 100, я ищу цифру 100 и ее добавляю к размеру 100:

$(".d100").change(function() {  $('.prom_vents~#product[class~="100"]').hide(500);  
    if(this.checked) {       $('.prom_vents~#product[class~="100"]').show("slow");
      } else {  $('.prom_vents~#product[class~="100"]').hide(500);  }



А тут управляю переменной по размеру, которая находится в названии модели...


<form method="post" action="" class="diametr_form"><label></label>
<label><input type="checkbox" name="diametr" value=".d100" class="d100" />100 мм</label>
<label><input type="checkbox" name="diametr" value=".d125" class="d125" />125 мм</label>
<label><input type="checkbox" name="diametr" value=".d150" class="d150" />150 мм</label>
 </form>

Zhenyaxxxx 26.10.2018 17:56 
<!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>
$(".d100").change(function() {  $('.prom_vents~#product[class~="100"]').hide(500);  
    if(this.checked) {       $('.prom_vents~#product[class~="100"]').show("slow");
      } else {  $('.prom_vents~#product[class~="100"]').hide(500);  }
  </script>
</head>

<body>
<form method="post" action="" class="diametr_form"><label></label>
<label><input type="checkbox" name="diametr" value=".d100" class="d100" />100 мм</label>
<label><input type="checkbox" name="diametr" value=".d125" class="d125" />125 мм</label>
<label><input type="checkbox" name="diametr" value=".d150" class="d150" />150 мм</label>
 </form>
$result = mysql_query(" SELECT *  FROM `product` WHERE `brand`='Вентс' ");
$row = mysql_fetch_assoc($result);
mysql_close();

while($row = mysql_fetch_assoc($result)){
?>
<div id="product" class="<?= $row['model']; ?>" >
       
       
       
       
       
<?php  
}    
</body>
</html>

рони 26.10.2018 19:22
Zhenyaxxxx,
Цитата:
Сообщение от рони
не могу представить данную структуру в нормальном html!
напишите ваш минимальный html.
:-?
почему id везде однаково?
можно как-то так?
<div class="prom_vents">
    <div  class="d100">100</div>
    <div  class="d125">125</div>
    <div  class="d150">150</div>
</div>

Zhenyaxxxx 26.10.2018 20:07
Сейчас попробую подробней описать.... если не получиться, вечером скину подробней код...

1. Есть много одинаковых блоков div с одинаковым id... (потом передалаю на class). Смысл не в том.. В этих div я вывожу вентиляторы с картинкой и описанием. Чтобы сортировать их, я придумал брать совпадение в названии модели. Например для вентилятора ВКОМ 100 и ВцУН 100 будет совпадением цифра 100, которая указывает на диаметр подключения. У меня получился очень длинный код jq который каждый раз дублировался под размер.... Вы мне показали хорошее решение для выдачи блоков... Единственное в нем я не могу отслеживать совпадение в названии модели в
фразе...например цифру 100 из слова "ВКОМ 100"... Для того чтобы выдавать к просмотру типы вентиляторов соответствующие размеру 100... Понимаете?

рони 26.10.2018 20:42
Zhenyaxxxx,
будет html будет код

рони 26.10.2018 20:49
Zhenyaxxxx,
изменить то надо всего пару значений, знать бы на что менять,а так можно только гадать.

рони 26.10.2018 21:36
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>

Zhenyaxxxx 26.10.2018 23:22
Фильтр по чекбоксам
 
Вот код..... теперь будет понятней...... Хочу упростить 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>

рони 27.10.2018 00:16
Zhenyaxxxx,
испорченный телефон ... уже несколько постов ... напишите html код ваших блоков, иначе я не могу вам помочь!!!
4 строки, да одного блока бы хватило!!!

j0hnik 27.10.2018 00:22
рони,
не волнуйтесь, вы так :victory:
Zhenyaxxxx
в браузере нажмите f12 -> Elements в окне код отрендеренной страницы
найдите нудный блок правой кнопкой Copy -> Copu OuterHTML

Zhenyaxxxx 27.10.2018 07:31
Добавил в код сверху run, чтоб можно было запустить его но он почему то не работает (чекбокы есть, но не выводят значения), хотя на сайте (под формой 3 чекбокса https://ensy.com.ua/?page=contacti )у меня все ок... не знаете почему? Выделил жирным ДИВ, которые выводится циклом... а сверху в js строчку, где ищу совпадение в классе...

рони 27.10.2018 08:37
Zhenyaxxxx,
возможно проблема понимания в том что вы пишите php, а вас просят результат работы php - html код - чтобы понять какая у вас струтура DOM.
и примеры здесь на форуме тоже не работают с php.
в checkbox можно value добавить?

Zhenyaxxxx 27.10.2018 08:45
конечно можно, главная цель это сократить js и оставить возможность фильтровать по части значения из массива $raketa[$index];

рони 27.10.2018 08:49
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>

Zhenyaxxxx 27.10.2018 10:03
Чудеса) все работает))) Огромнейшее спасибо)):dance:

Zhenyaxxxx 27.10.2018 18:40
Помогите еще разок.... Как бы та сделать, чтобы когда выбираешь чекбокс "100" и чекбокс "первый", результатом был один DIV с названием "первый 100"...?

<!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>
<label><input type="checkbox"  value="Первый" class="dperv" />Первый</label>
<label><input type="checkbox"  value="Второй" class="dvtor" />Второй</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 18:59
фильтр по наличию всех выбранных параметров
 
Zhenyaxxxx,
<!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.join("")).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>
<label><input type="checkbox"  value="Первый" class="dperv" />Первый</label>
<label><input type="checkbox"  value="Второй" class="dvtor" />Второй</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>

Zhenyaxxxx 28.10.2018 09:47
Крутизна)))) 1000 000 вам в карму)))


Часовой пояс GMT +3, время: 11:33.