Я работаю над проектом для школы, в котором мне нужно сделать селектор продуктов с помощью jQuery! Но, к сожалению, я не могу заставить его работать!
Код: http://jsfiddle.net/rda9Q/2/
Как вы можете видеть, в начале мне нужен весь продукт, который будет показан в div; тогда, когда мы проверяем check1, все различные продукты скрыты, чтобы показать список продуктов с атрибутом check1; то же самое с check2; а затем (самая важная часть), когда оба проверяются, чтобы показать другой список продуктов с двумя атрибутами!
Я не уверен, но я думаю, что проблема в этой части:
function myFunction()
{
if ($("#check1").is(':checked'))
{
$(".results").hide();
$("#check1result").show();
}
}
function myFunction()
{
if ($("#check2").is(':checked'))
{
$(".results").hide();
$("#check2result").show();
}
}
function myFunction()
{
if ($("#check1").is(':checked'), $("#check2").is(':checked'))
{
$(".results").hide();
$("#check1et2result").show();
}
}
Но я просто не могу его найти!
Любая помощь будет очень оценена :)
Вы можете определить myFunction() один раз. Также без myFunction() вы можете использовать событие jquery click. Вот скрипка: http://jsfiddle.net/rda9Q/4/
Также не забудьте включить библиотеку jquery в меню левой стороны.
Вот HTML:
<input type="checkbox" id="check1">Check1<br>
<input type="checkbox" id="check2">Check2<br>
<button id="button">Filter</button>
<div id="mainresult" class="results">
<p>All the products</p>
</div>
<div id="check1result" class="results" style="display:none;">
<p>The products with the specific spec Check1</p>
</div>
<div id="check2result" class="results" style="display:none;">
<p>The products with the specific spec Check2</p>
</div>
<div id="check1et2result" class="results" style="display:none;">
<p>Products with both specs Check 1 and 2</p>
</div>
И вот сценарий:
$('#button').on('click',function(){
if($("#check1").is(':checked') && $("#check2").is(':checked')){
$(".results").hide();
$("#check1result").show();
$("#check2result").show();
/*
OR IF YOU STILL WANT TO USE SPECIFIC DIV FOR BOTH RESULTS
$("#check1et2result").show();
*/
}
else if ($("#check1").is(':checked'))
{
$(".results").hide();
$("#check1result").show();
}
else if ($("#check2").is(':checked'))
{
$(".results").hide();
$("#check2result").show();
}
else{
$(".results").hide();
}
});
Вы также можете попробовать сделать некоторые действия непосредственно при изменении флажка без кнопки:
HTML:
<input type="checkbox" id="check1" class="checkbox">Check1<br>
<input type="checkbox" id="check2" class="checkbox">Check2<br>
<div id="mainresult" class="results all">
<p>All the products</p>
</div>
<div id="check1result" class="results check1" style="display:none;">
<p>The products with the specific spec Check1</p>
</div>
<div id="check2result" class="results check2" style="display:none;">
<p>The products with the specific spec Check2</p>
</div>
<div id="check1et2result" class="results check1check2" style="display:none;">
<p>Products with both specs Check 1 and 2</p>
</div>
JQuery:
$('.checkbox').change(function(){
var className = '';
$('.checkbox:checked').each(function(){
className += $(this).attr('id');
});
if(className.length == 0)
className = 'all';
$('div').hide();
$('div.' + className).show();
});
Fiddle - >> http://jsfiddle.net/rda9Q/5/
Так много опечаток и ошибок:
myFunction
может быть определен один со всей логикой, не определяя его третьим$("#check1).is(':checked'))
имеет синтаксическую ошибку, проверьте, что консоль браузера - ваш друг на всю жизнь&&
is &&
not ,
Ознакомьтесь с основными сведениями здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript и здесь http://learn.jquery.com
Код:
function myFunction() {
$(".results").show();
$("#check1et2result, #check1result, #check2result").hide();
if ($("#check1").is(':checked') && $("#check2").is(':checked')) {
$(".results").hide();
$("#check1et2result").show();
} else {
if ($("#check1").is(':checked')) {
$(".results").hide();
$("#check1result").show();
}
if ($("#check2").is(':checked')) {
$(".results").hide();
$("#check2result").show();
}
}
}