Question

我有一个问题，我似乎无法弄清楚如何解决..我仍然绿色的JavaScript。

我有这个标记：

<div class="area-listing">
    <div id="list-filter">
        <input type="radio" id="all" name="rr" data-filter="all" checked />
        <label for="all"><span></span>Samtliga</label>

        <input type="radio" id="student" name="rr" data-filter="student" />
        <label for="student"><span></span>Studentboende</label>

        <input type="radio" id="construction" name="rr" data-filter="construction" />
        <label for="construction"><span></span>Nybyggnation</label>

        <input type="checkbox" id="available" name="cc" data-filter="available" />
        <label for="available"><span></span>Visa endast lediga lägenheter</label>

    </div>

    <div class="area col-sm-4"></div>
    <div class="area col-sm-4 construction"></div>
    <div class="area col-sm-4 available student"></div>
    <div class="area col-sm-4 available"></div>
    <div class="area col-sm-4 available"></div>
    <div class="area col-sm-4 available"></div>

</div>



function areaListing() {
    if ($(".area-listing").length) {
        var filters = $(".area-listing #list-filter");
        var areas = $(".area-listing .area");

        areas.show();

        var $areas = $('input').on("change", function () {
            if (this.id == 'all') {
                areas.fadeIn(450);
            } else {
                var $el = $('.' + this.id).fadeIn(450);
                areas.not($el).hide();
            }
            $areas.removeClass('filtered');
            $(this).addClass('filtered');
        })
    }
}

使用javascript我现在根据单选按钮进行过滤。但是我想添加触发"checkbox"上的另一个过滤器的可能性来过滤掉＃34;可用＆＃34;元素。但是我无法让它发挥作用..任何人都可以帮助我吗？现在它可以在第一个复选框上单击，但在取消它时不会注册。

澄清一下：单击复选框时，应保留过滤但仅显示可用区域。如果没有遮挡它应该显示所有。

Answer 1

这是基于Checkbox和Radio按钮的过滤代码。选中任何单选按钮或复选框（或取消选中复选框）时，您需要首先获取复选框的选中状态。如果选中此复选框，则只显示.available区域，其他区域应隐藏。如果未选中此复选框，则无需担心.available元素。

以下是一些建议：

在ready
$('.area-listing').length不需要，因为如果代码在页面加载后执行，它将始终为true
filters从未使用过，因此可以删除。
areas.show()不需要如果 .area元素未被隐藏。
使用data-filter代替ID，以获取要应用过滤器的类。

Fiddle Demo

// When DOM is completely loaded
$(document).ready(function() {
  'use strict';

  // Cache element references
  var $areas = $('.area');
  var $checkbox = $('#available');
  var $radios = $('#list-filter :radio');
  var checkboxFilter = $checkbox.data('filter');

  // Bind change event on radio buttons and checkbox
  $('#list-filter').on('change', ':radio, :checkbox', function(e) {

    // Get the checked status of checkbox
    var isCheckboxChecked = $checkbox.is(':checked');

    // Get the checked radio button filter
    var radio = $radios.filter(':checked').data('filter');
 
    // Create filter based on checked radio button and checkbox state
    var filter = isCheckboxChecked ? '.' + radio + '.' + checkboxFilter : '.' + radio;


    if (radio === 'all') {
      if (isCheckboxChecked) {
        // Show only .available
        $areas.filter('.' + checkboxFilter).fadeIn(450);
      } else {
        // Show all
        $areas.fadeIn(450);
      }
    } else {
      // Hide those except filtered
      $areas.not(filter).hide();

      // Show filtered
      $areas.filter(filter).fadeIn(450);
    }
  }).trigger('change'); // To call the handler on page load
});

label {
  margin-right: 2px;
}

div.area {
  margin: 5px;
  color: green;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area-listing">
  <div id="list-filter">
    <input type="radio" id="all" name="rr" data-filter="all" checked />
    <label for="all"><span></span>Samtliga</label>

    <input type="radio" id="student" name="rr" data-filter="student" />
    <label for="student"><span></span>Studentboende</label>

    <input type="radio" id="construction" name="rr" data-filter="construction" />
    <label for="construction"><span></span>Nybyggnation</label>

    <input type="checkbox" id="available" name="cc" data-filter="available" />
    <label for="available"><span></span>Visa endast lediga lägenheter</label>

  </div>

  <div class="area col-sm-4">First</div>
  <div class="area col-sm-4 construction">Second</div>
  <div class="area col-sm-4 available student">Third</div>
  <div class="area col-sm-4 available">Fourth</div>
  <div class="area col-sm-4 available">Fifth</div>
  <div class="area col-sm-4 available">Sixth</div>

</div>

Answer 2

您可以将当前过滤器存储在变量中，并在单击单选按钮或复选框输入后更改它们。

function areaListing() {
  if ($('.area-listing').length) {
    var filters = $('.area-listing #list-filter');
    var areas = $('.area-listing .area');

    areas.show();

    var currentFilter = 'all';
    var showOnlyAvailable = false;
    
    function filterAreas() {
    	var currentSelector = '.area';
      
      if (currentFilter !== 'all') {
      	currentSelector += '.' + currentFilter;
      }
      
      if (showOnlyAvailable) {
      	currentSelector += '.available';
      }
      
      var $el = $(currentSelector).fadeIn(450);
      areas.not($el).hide();
    }

    $('input[type="radio"]').on('change', function() {
      currentFilter = this.id;
      
      filterAreas();
    });
    
    $('input[type="checkbox"]').on('change', function() {
      showOnlyAvailable = $(this).is(':checked');
      
      filterAreas();
    });
  }
}

areaListing();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="area-listing">
    <div id="list-filter">
        <input type="radio" id="all" name="rr" data-filter="all" checked />
        <label for="all"><span></span>Samtliga</label>

        <input type="radio" id="student" name="rr" data-filter="student" />
        <label for="student"><span></span>Studentboende</label>

        <input type="radio" id="construction" name="rr" data-filter="construction" />
        <label for="construction"><span></span>Nybyggnation</label>

        <input type="checkbox" id="available" name="cc" data-filter="available" />
        <label for="available"><span></span>Visa endast lediga lägenheter</label>

    </div>

    <div class="area col-sm-4">a</div>
    <div class="area col-sm-4 construction">b</div>
    <div class="area col-sm-4 available student">c</div>
    <div class="area col-sm-4 available">d</div>
    <div class="area col-sm-4 available">e</div>
    <div class="area col-sm-4 available">f</div>

</div>

Answer 3

我想我知道你想要做什么，首先，从收音机或复选框进行检查对于正常使用来说有点奇怪，我认为你需要使用“过滤器”按钮，所以我添加了一个过滤所选的每个选项。

这是JS代码：

//Launch the filter with a button
$("#list-filter input[type='button']").click(function(){ 

    //Get the element
    var input = $("#list-filter input[type='radio']:checked").attr("data-filter");
    var check = $("#list-filter input[type='checkbox']");

    //Check for available only
    if(check.is(":checked")){
        if(input=="all"){ //Show all available
            $(".area-listing .area").css("display","none");
            $(".area-listing .area.available").css("display","block");
        }
        else{ //Show only available in the desired area
            $(".area-listing .area").css("display","none");
            $(".area-listing .area.available."+input).css("display","block");
        }
    }
    else //If not available is checked
    {
        if(input=="all"){ //Show all
            $(".area-listing .area").css("display","block");
        }
        else{ //Show only the desired area
            $(".area-listing .area").css("display","none");
            $(".area-listing .area."+input).css("display","block");
        }
    }

});

这是完整测试（我添加了一个CSS来默认隐藏所有区域，以及用于过滤所有选项的按钮）

https://jsfiddle.net/psyzc79w/

告诉我这种方式对你有用。

基于无线电/复选框状态的Jquery过滤状态

3 个答案: