Как управлять списком PHP с помощью триггера JavaScript

Question

Я в приложении php (symfony4) / twig. На части, которая динамически отображает список предупреждений в php. Мне нужно поставить флажки для управления этим списком (показать / скрыть некоторые оповещения).

файл ветки:

  <div class="x_title" style="display: flex">
       <h2 class="text-uppercase">
            <span id="nbAlerts">-</span> alerte(s)
       </h2>
       <div class="clearfix"></div>
       <label class="container-checkbox">Required action
           <input type="checkbox" checked="checked" id="red_action">
           <span class="checkmark checkMarkRed"></span>
       </label>

       <label class="container-checkbox">Major action
           <input type="checkbox" checked="checked" id="orange_action">
           <span class="checkmark checkMarkOrange"></span>
       </label>

       <label class="container-checkbox">Action mineure
           <input type="checkbox" checked="checked" id="yellow_action">
           <span class="checkmark checkMarkYellow"></span>
       </label>
  </div>
  <div class="x_content">
     <div id="AlertListContainer">
          /* place where the alerts' list is dynamically appears */
     </div>
  </div>

Файл AlertList

{% if toAlert is empty %}
    no alert to display

{%  else %}
    <ul class="to_do">
        {% for oAlert in toAlert %}
            {% set alertColor = '' %}

            {% if oAlert.type.level.label == 'High' %}
                {% set alertColor = 'red' %}
            {% elseif oAlert.type.level.label == 'Medium' %}
                {% set alertColor = 'orange' %}
            {% elseif oAlert.type.level.label == 'Low' %}
                {% set alertColor = 'yellow' %}
            {% endif %}
               <li class="border_{{ alertColor }}" 
                   onclick="window.location.href='{{ oAlert.link }}'">
                   <p class="tag-notif text-uppercase text-center">
                       {{ oAlert.type.level.label }}
                   </p>
                   <p class="text-notif">
                       {{ oAlert.content }}
                   </p>
               </li>

       {% endfor %}
   </ul>
{% endif %}

Итак, когда установлен только флажок «необходимое действие», я хочу видеть только предупреждения: oAlert.type.level.label == «Высокий».

Я сделал это в моем javascript, но я знаю, что это неправильно ...

$(function () {
     $("#red_action").click(function () {
         if ($(this).is(":checked")) {
             $({{oAlert.type.level.label == 'High'}}).show();
         } else {
             $({{oAlert.type.level.label == 'High'}}).hide();
         }
     });
});

Answer 1

я не нашел лучшего подхода, который бы так сильно не изменил ваш код, поэтому я написал это, это сработает, если не будет делать некоторые изменения

<div class="x_title" style="display: flex">
       <h2 class="text-uppercase">
            <span id="nbAlerts">-</span> alerte(s)
       </h2>
       <div class="clearfix"></div>
       <label class="container-checkbox">Required action
           <input type="checkbox" checked="checked" id="red_action" data-checkcolor="red">
           <span class="checkmark checkMarkRed"></span>
       </label>

       <label class="container-checkbox">Major action
           <input type="checkbox" checked="checked" id="orange_action" data-checkcolor="orange">
           <span class="checkmark checkMarkOrange"></span>
       </label>

       <label class="container-checkbox">Action mineure
           <input type="checkbox" checked="checked" id="yellow_action" data-checkcolor="yellow">
           <span class="checkmark checkMarkYellow"></span>
       </label>
  </div>
  <div class="x_content">
     <div id="AlertListContainer">
          /* place where the alerts' list is dynamically appears */
     </div>
  </div>

{% if toAlert is empty %}
    no alert to display

{%  else %}
    <ul class="to_do">
        {% for oAlert in toAlert %}
            {% set alertColor = '' %}

            {% if oAlert.type.level.label == 'High' %}
                {% set alertColor = 'red' %}
            {% elseif oAlert.type.level.label == 'Medium' %}
                {% set alertColor = 'orange' %}
            {% elseif oAlert.type.level.label == 'Low' %}
                {% set alertColor = 'yellow' %}
            {% endif %}
               <li data-color="{{ alertColor }}" hidden class="border_{{ alertColor }}" 
                   onclick="window.location.href='{{ oAlert.link }}'">
                   <p class="tag-notif text-uppercase text-center">
                       {{ oAlert.type.level.label }}
                   </p>
                   <p class="text-notif">
                       {{ oAlert.content }}
                   </p>
               </li>

       {% endfor %}
   </ul>
{% endif %}

<script>
     $("[data-checkcolor]").on('change',function () {
        var color = $(this).attr('data-checkcolor');
         if ($(this).is(":checked")) {
             $("[data-color='"+color+"']").prop('hidden',false);
         } else {
             $("[data-color='"+color+"']").prop('hidden',true);
         }
     });
</script>