Javascript-форум - Поместить однотипные input "checkbox" для сортировки в цикл

Страница 1 из 3

Показывать 40 сообщений этой темы на одной странице

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 будет код

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

Страница 1 из 3

Показывать 40 сообщений этой темы на одной странице