Результаты поиска не будут фильтроваться должным образом [jquery] - PullRequest
Новая
       2

Результаты поиска не будут фильтроваться должным образом [jquery]

0 голосов
/ 10 января 2020

Привет, небольшой отказ от ответственности: у меня неспособность к обучению, извините, заранее.

Мне нужно выполнить задание jquery, где мы производим продукты, а затем возможность фильтровать их с помощью флажков. Теперь я следовал всему, чему мы научились на уроке, и пытался применить его, но он отказывается фильтровать ... 

$('.fruit').hide();
$('#fruitCheck').click(function() {
   if ($(this).is(':checked')) {
       $('.fruit').show();
   } else {
       $('.fruit').hide()
   }
};
ul
{
    list-style-type: none;
}
div ul li
{
    margin: 5px;
    float: left;
}    
img
{
    
}
.fruit p
{
	float: left;
	position: absolute;
	margin-top: -15px;
	margin-left: 20px;
	background-color: green;
	font-size:10px;
	padding-left:20px;
	padding-right:20px;
	opacity: 0.8;
}

.frisdrank p
{	
	float: left;
	position: absolute;
	margin-top: -15px;
	margin-left: 20px;
	background-color: red;
	font-size:10px;
	padding-left:20px;
	padding-right:20px;
	opacity: 0.8;
}

.dier p
{  	
	float: left;
	position: absolute;
	margin-top: -15px;
	margin-left: 20px;
	background-color: yellow;
	font-size:10px;
	padding-left:20px;
	padding-right:20px;
	opacity: 0.8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> </title>
</head>
<body>
<label for="fruitCheck">
    <input type="checkbox" id="fruitcheck"  />
    Fruit
</label>

<div class="row">
    <ul>
        <li class="frisdrank"><img src="https://i.imgur.com/FW5hGnb.png" /><p>Cola</p></li>
        <li class="frisdrank"><img src="https://i.imgur.com/N3U2j5t.png" /><p>Fanta</p></li>
        <li class="fruit"><img src="https://i.imgur.com/7yazXfi.png"/><p> Appel</p></li>
        <li class="fruit"><img src="https://i.imgur.com/R4bx4kT.png" /><p>Peer</p></li>
        <li class="dier"><img src="https://i.imgur.com/JshZluf.png" /><p>Hond</p></li>
        <li class="dier"><img src="https://i.imgur.com/00auPwp.png" /><p>Kat</p></li>

    </ul>
</div>


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="hello_world.js"></script>
</body>
</html>

Прямо сейчас это выглядит так: https://i.imgur.com/p1PctA3.png

скрипка: https://jsfiddle.net/97nd3t81/

PS. Я знаю, что сейчас есть только один флажок, я планировал просто скопировать и вставить их после того, как заработал первый.

Ответы [ 2 ]

0 голосов
/ 10 января 2020

Изменить 

<label for="fruitCheck">
    <input type="checkbox" id="fruitcheck"  />
    Fruit
</label>

на 

<input id='fruitcheck' type='checkbox' /><lable for='fruitcheck'>Fruit</label>

Тогда вы можете сделать: 

var fruits = $('.fruit'), fruitcheck = $('#fruitcheck'); 
fruitcheck.prop('checked', false); fruit.hide();
fruitcheck.click(function(){​
  if(fruitcheck.is(':checked')) {​
    fruits.show();
  } 
  else{​
    fruits.hide();
  }
});
0 голосов
/ 10 января 2020

Обновил ваш JSfiddle, отметьте его здесь . 

$('.fruit').hide();
$('#fruitcheck').click(function() {
   if ($(this).is(':checked')) {
       $('.fruit').show();
   } else {
       $('.fruit').hide()
   }
});

Единственной недостающей вещью была скобка в конце функции .click. Вы можете найти документацию по функции .click здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...