JQuery单选按钮过滤器不起作用答案

【问题标题】：JQuery radio button filters not workingJQuery单选按钮过滤器不起作用
【发布时间】：2013-08-10 05:20:24
【问题描述】：

我正在使用单选按钮做一个非常简单的过滤器，我在一个组中有三个单选按钮。我想根据单选按钮选择在无序列表（UL）中附加不同的数据。我使用三个按钮在蔬菜、非蔬菜和两者（无）之间进行过滤。我正在使用的代码

   $(document).ready(function(){
   $(".getmenu").click(function(){
   $.getJSON("data.json",function(result){
   $.each(result, function(i, field){
    var cat=field.category;
    var t=field.type;

//putting case
          //radio filter one
    if($('.veg').checked) {
    if(t=="veg"){
    switch(cat){
    case "Soups":
    $(".soup").append(field.menu_item + "<br />");
    break;
    case "Main Course":
    $(".main").append(field.menu_item + "<br />");
    break;
    case "Starters":
    $(".starter").append(field.menu_item + "<br />");
    break;
    }
    }
    }
        ////radio filter two
    else if($('.nveg').checked){
    if(t=="non-veg"){
    switch(cat){
    case "Soups":
    $(".soup").append(field.menu_item + "<br />");
    break;
    case "Main Course":
    $(".main").append(field.menu_item + "<br />");
    break;
    case "Starters":
    $(".starter").append(field.menu_item + "<br />");
    break;
    }
    }
    }

       //radio filter three
    else {

    switch(cat){
    case "Soups":
    $(".soup").append(field.menu_item + "<br />");
    break;
    case "Main Course":
    $(".main").append(field.menu_item + "<br />");
    break;
    case "Starters":
    $(".starter").append(field.menu_item + "<br />");
    break;
    }
    }
    }

如果我没有放置这个过滤器，我可以从 json 中追加数据。我的文件如下所示：

   [
   {"category":"Soups","menu_item":"Tomato Soup","type":"veg"},
   {"category":"Starters","menu_item":"Summer Salad","type":"veg"},
   {"category":"Main Course","menu_item":"Black Beans Chicken","type":"non-veg"},
   {"category":"Soups","menu_item":"Lentil Soup","type":"veg"}
   ]

【问题讨论】：

你的 HTML 是什么样的？你能提供一个jsfiddle吗？

标签： jquery json radio-button

【解决方案1】：

检查无线电输入应该是if ($('.veg').is(':checked') {...}

【讨论】：

【解决方案2】：

用途：

$('.nveg').is(":checked")

【讨论】：

【解决方案3】：

我也同意.checked 在这里不起作用。我尝试将其插入 jsfiddle 并且 .is(":checked") works while.checked` 没有。

这是一个工作示例。

http://jsfiddle.net/earlonrails/W6ZS2/17/

检查修复后，您的新问题可能是所有 json 部分仍由 else 子句打印，无论选择哪个单选按钮。我不确定您的页面是如何设置的，但可能希望通过额外的条件检查来修复该部分。

这是我的代码版本。我只是假设 json 已经被检索到了。

$(document).ready(function() {
  $(".getmenu").click(function() {
    result =  [
     {"category":"Soups","menu_item":"Tomato Soup","type":"veg"},
     {"category":"Starters","menu_item":"Summer Salad","type":"veg"},
     {"category":"Main Course","menu_item":"Black Beans Chicken","type":"non-veg"},
     {"category":"Soups","menu_item":"Lentil Soup","type":"veg"}
   ];
    // $.getJSON("data.json", function(result) {
      $.each(result, function(i, field) {
        console.log("got here, each");
        var cat = field.category;
        var t = field.type;

        //putting case
        //radio filter one
        if ($('.veg').is(':checked') && t == "veg") {
          console.log("got here, veg");
          switch (cat) {
            case "Soups":
             $(".soup").append(field.menu_item + "<br />");
             break;
            case "Main Course":
             $(".main").append(field.menu_item + "<br />");
             break;
            case "Starters":
             $(".starter").append(field.menu_item + "<br />");
             break;
          }
        ////radio filter two
        } else if ($('.nveg').is(':checked') && t == "non-veg") {
          console.log("got here, nveg");
          switch (cat) {
            case "Soups":
              $(".soup").append(field.menu_item + "<br />");
              break;
            case "Main Course":
              $(".main").append(field.menu_item + "<br />");
              break;
            case "Starters":
              $(".starter").append(field.menu_item + "<br />");
              break;
          }
        ////radio filter three
        } else {
          console.log("got here, other");
          switch (cat) {
            case "Soups":
              $(".soup").append(field.menu_item + "<br />");
              break;
            case "Main Course":
              $(".main").append(field.menu_item + "<br />");
              break;
            case "Starters":
              $(".starter").append(field.menu_item + "<br />");
              break;
          }
        }
      });
  });
});

希望这会有所帮助！

【讨论】：

【解决方案4】：

优化代码

不要为每一个 if else 做这个。

$(document).ready(function() {
  $(".getmenu").click(function() {
    result =  [
     {"category":"Soups","menu_item":"Tomato Soup","type":"veg"},
     {"category":"Starters","menu_item":"Summer Salad","type":"veg"},
     {"category":"Main Course","menu_item":"Black Beans Chicken","type":"non-veg"},
     {"category":"Soups","menu_item":"Lentil Soup","type":"veg"}
   ];
      $.each(result, function(i, field) {
        var cat = field.category;
        var t = field.type;
          var map = {
              "Soups" : ".soup",
              "Main Course" : ".main",
              "Starters" : ".starter"
          };
          var elementToAppend = map[cat];
          $(elementToAppend).append(field.menu_item+"<br />");
      });
  });
});

这是Fiddle的小提琴

您也可以附加类别。与另一张地图——$(type).find(elementToAppend).append(...)

【讨论】：