С несколькими флажками, как сделать селектор продукта?

0

Я работаю над проектом для школы, в котором мне нужно сделать селектор продуктов с помощью 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();
  }
}

Но я просто не могу его найти!

Любая помощь будет очень оценена :)

  • 0
    Хотите ли вы видеть совершенно другой набор продуктов при выборе check1 и check2 или комбинацию результатов check1 и check2?
  • 0
    Я просто хочу увидеть конкретный div, в котором я смешал все продукты вручную :)
Теги:
if-statement
checkbox

3 ответа

0
Лучший ответ

Вы можете определить 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();
    }
});
  • 0
    Большое спасибо Caner! Я новичок в этом деле, и вы мне очень помогли :)
0

Вы также можете попробовать сделать некоторые действия непосредственно при изменении флажка без кнопки:

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/

0

Так много опечаток и ошибок:

  1. myFunction может быть определен один со всей логикой, не определяя его третьим
  2. $("#check1).is(':checked')) имеет синтаксическую ошибку, проверьте, что консоль браузера - ваш друг на всю жизнь
  3. оператор && is && not ,
  4. вы можете зарегистрировать обработчик кликов в jQuery вместо встроенного onclick и т.д.

Ознакомьтесь с основными сведениями здесь: 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();
        }
    }
}

Демо: http://jsfiddle.net/DBEww/

  • 0
    Большое спасибо за советы myFunction и оператора!
  • 0
    @ Jean-Pelouse, пожалуйста, если решено, отметьте галочкой ответ как принятый.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню