查看“︁微件:PlantFilter”︁的源代码

<includeonly>
<style>
.pvzhe-filter-box {
  margin: 10px 0;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.pvzhe-filter-box input, .pvzhe-filter-box select {
  padding: 4px;
}
.pvzhe-card.hidden-card {
  display: none;
}
</style>

<div class="pvzhe-filter-box">
  <input type="text" id="pf-name" placeholder="名称搜索...">
  <label>阳光 ≤ <input type="number" id="pf-sun-max" placeholder="不限" style="width:70px;"></label>
  <label>冷却 ≤ <input type="number" id="pf-cd-max" placeholder="不限" style="width:70px;"></label>
  <select id="pf-type">
    <option value="">全部类型</option>
    <option value="生产">生产</option>
    <option value="攻击">攻击</option>
    <option value="防御">防御</option>
    <option value="一次性">一次性</option>
    <option value="灰烬">灰烬</option>
    <option value="治愈">治愈</option>
    <!-- 根据需要添加更多选项 -->
  </select>
  <button id="pf-reset">重置</button>
</div>

<script>
(function() {
  var $cards = $('.pvzhe-card');
  function filterCards() {
    var name = $('#pf-name').val().toLowerCase();
    var sunMax = parseFloat($('#pf-sun-max').val()) || Infinity;
    var cdMax = parseFloat($('#pf-cd-max').val()) || Infinity;
    var type = $('#pf-type').val();

    $cards.each(function() {
      var $card = $(this);
      var n = ($card.data('name') || '').toLowerCase();
      var sun = parseFloat($card.data('sun')) || 0;
      var cd = parseFloat($card.data('cooldown')) || 0;
      var t = $card.data('type') || '';

      var show = true;
      if (name && n.indexOf(name) === -1) show = false;
      if (sun > sunMax) show = false;
      if (cd > cdMax) show = false;
      if (type && t !== type) show = false;

      $card.toggleClass('hidden-card', !show);
    });
  }

  $('#pf-name, #pf-sun-max, #pf-cd-max, #pf-type').on('input change', filterCards);
  $('#pf-reset').click(function() {
    $('#pf-name, #pf-sun-max, #pf-cd-max').val('');
    $('#pf-type').val('');
    filterCards();
  });
})();
</script>
</includeonly>