Question

我的应用程序上有一个过滤器功能，其中1个由2个开关盒组成。
我通过每个数据div中的2个隐藏元素来检查过滤器功能。现在，我需要这2个过滤器才能协同工作。
例如：如果我选择了关键和NETXMS，它将仅使用NETXMS和关键显示数据，如果需要，则需要显示它们。

我真的不知道如何解决这个问题，朝正确方向迈出的一步真是太棒了。

$("#select").change(function() {
                var selectedValue = document.getElementById("select").value;
                switch (selectedValue) {

                    case 'critical':
                        $(".severityNummer").parent().show();
                        $(".severityNummer:contains('3'), .severityNummer:contains('2'), " + ".severityNummer:contains('1'), .severityNummer:contains('0')").parent().hide();            
                        break;

                    case 'major':
                        $(".severityNummer").parent().show();
                        $(".severityNummer:contains('4'), .severityNummer:contains('2'), " + ".severityNummer:contains('1'), .severityNummer:contains('0')").parent().hide();
                        break;

                    case 'minor':
                        $(".severityNummer").parent().show();
                        $(".severityNummer:contains('4'), .severityNummer:contains('3'), " + ".severityNummer:contains('1'), .severityNummer:contains('0')").parent().hide();
                        break;
                    case 'warning':
                        $(".severityNummer").parent().show();
                        $(".severityNummer:contains('4'), .severityNummer:contains('3'), " + ".severityNummer:contains('2'), .severityNummer:contains('0')").parent().hide();

                        break;

                        // Als default worden alle alarmen weergegeven
                    default:
                        $(".severityNummer").parent().show();

                        break;
                } // Einde switch cases
            }
                    
            ); // Einde $("#select").change functie
            $("#origin_select").change(function() {
                // Haalt id op voor de filterknop
                var selectedValueOrigin = document.getElementById("origin_select").value;
                switch (selectedValueOrigin) {

                    case 'NETXMS':
                        $(".originValue").parent().show();
                        $(".originValue:contains('800XA')").parent().hide();

                        break;

                    case '800XA':
                       $(".originValue").parent().show();
                        $(".originValue:contains('NETXMS')").parent().hide();

                        break;
                        
                        // Als default worden alle alarmen weergegeven
                    default:
                        $(".originValue").parent().show();
 
                        break;
                } // Einde switch cases
            }
                    
            );

.Alarm{
    border: black solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-body">
<p>Status
<select name="statussen" id="select">
<option value="all" class="option"> All </option>
<option value="critical" class="option"> Critical </option>
<option value="major" class="option"> Major </option>
<option value="minor" class="option"> Minor </option>
<option value="warning" class="option"> Warning </option>
 </select>
 </p>
<p>Origin
<select name="origin" id="origin_select">
 <option value="all" class="option"> All </option>
 <option value="NETXMS" class="option"> NETXMS </option>
<option value="800XA" class="option"> 800XA </option>
</select>
 </div>
 
 
 <div class="Alarm">
 <div class="Content">Content</div>
 <div class="hidden severityNummer">1</div>
 <div class="hidden originValue">800XA</div>
 </div>
 
 <div class="Alarm">
 <div class="Content">Content</div>
 <div class="hidden severityNummer">2</div>
 <div class="hidden originValue">NETXMS</div>
 </div>
 
 <div class="Alarm">
 <div class="Content">Content</div>
 <div class="hidden severityNummer">3</div>
 <div class="hidden originValue">800XA</div>
 </div>
 
 <div class="Alarm">
 <div class="Content">Content</div>
 <div class="hidden severityNummer">4</div>
 <div class="hidden originValue">NETXMS</div>
 </div>

编辑：添加了一个不正常工作的代码段。

Answer 1

这是解决问题的一种更实用的方法。请注意数据属性的添加

var map = {
  'all': 0,
  'critical': 1,
  'major': 2,
  'minor':3,
  'warning': 4
}

var level = "0";
var origin = "all";


function filterAlarms() {
  let $alarms = $(".Alarm") 
  
  $alarms.each((i,el) => $(el).hide())
  
  $alarms = $alarms.filter( (i, el) => map[level] == 0 || el.dataset.severity == map[level])

  $alarms = $alarms.filter( (i, el) => origin == "all" || el.dataset.origin == origin)
  
  $alarms.each((i,el) => $(el).show())
  
}

$("#select").change(function(e) {
  level = e.target.value;
  filterAlarms();

}); 

$("#origin_select").change(function(e) {
  origin = e.target.value;
  filterAlarms();            
});

.Alarm{
    border: black solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-body">
<p>Status
<select name="statussen" id="select">
<option value="all" class="option"> All </option>
<option value="critical" class="option"> Critical </option>
<option value="major" class="option"> Major </option>
<option value="minor" class="option"> Minor </option>
<option value="warning" class="option"> Warning </option>
 </select>
 </p>
<p>Origin
<select name="origin" id="origin_select">
 <option value="all" class="option"> All </option>
 <option value="NETXMS" class="option"> NETXMS </option>
<option value="800XA" class="option"> 800XA </option>
</select>
 </div>
 
 
 <div class="Alarm" data-severity="1" data-origin="800XA">
 <div class="Content">Content</div>
 <div class="hidden severityNummer">1</div>
 <div class="hidden originValue">800XA</div>
 </div>
 
 <div class="Alarm" data-severity="2" data-origin="NETXMS">
 <div class="Content">Content</div>
 <div class="hidden severityNummer">2</div>
 <div class="hidden originValue">NETXMS</div>
 </div>
 
 <div class="Alarm" data-severity="3" data-origin="800XA">
 <div class="Content">Content</div>
 <div class="hidden severityNummer">3</div>
 <div class="hidden originValue">800XA</div>
 </div>
 
 <div class="Alarm" data-severity="4" data-origin="NETXMS">
 <div class="Content">Content</div>
 <div class="hidden severityNummer">4</div>
 <div class="hidden originValue">NETXMS</div>
 </div>

2个过滤器开关盒，它们可以同时过滤

1 个答案: