Создание простого JS с PHP

Question

Я пытаюсь воссоздать JS ниже с PHP. Причина в том, что нумерованные классы и значения на самом деле являются идентификаторами, вытащенными из базы данных mysql. У меня есть область, где говорят, что создается отчет, приведенный ниже код показывает и скрывает правила для этого отчета. Поскольку разные отчеты имеют разные правила, они показывают и скрывают правила, зависящие от группировки, определенные в коде ниже как #rule_who.

При попытке воссоздать следующее, которое я пытался использовать во время циклов, однако это стало довольно смешно. Есть ли более эффективный способ в JavaScript или AJAX показать и скрыть divs, которые лучше подходят для использования большого количества div? 2,3,4 и т. Д. Не должны быть увеличивающимся числом, поскольку оно будет полагаться на идентификаторы, и, следовательно, некоторые числа со временем исчезнут при удалении отчетов.

Любая помощь будет оценена по достоинству. Thanks

<script> 
//<![CDATA[ 
$(window).load(function(){ 
    $(".2").hide(); 
    $(".3").hide(); 
    $(".4").hide(); 
     $('#rule_who').on('change', function() { 

    if(this.value === "2"){ 
    $(".2").show(); 
    $(".3").hide(); 
    $(".4").hide(); 
    } else if(this.value === "3"){ 
    $(".2").hide(); 
    $(".3").show(); 
    $(".4").hide(); 
    } else if(this.value === "4"){ 
    $(".2").hide(); 
    $(".3").hide(); 
    $(".4").show(); 
    } else { 
    $(".2").hide(); 
    $(".3").hide(); 
    $(".4").hide(); 
    } 

}); 
});//]]> 

</script> 

EDIT: Спасибо всем за помощь.

То, что я в конечном итоге использовала было следующее:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 

$("#rule_who").change(function() { 
    $("div.specific_rules").hide(); 
    var targetId = $(this).val(); 

    console.log($(targetId).html()); 
    // show the new selected one 
    $("#"+targetId).show(); 
}); 
});//]]> 

</script> 

Answer 1

Я думаю, что вы можете сделать:

$('.' + this.value).show(); 
$('.' + this.value).siblings().hide(); 

Answer 2

Попробуйте это (FIDDLE EXAMPLE HERE):

$('.1, .2, .3').hide();  
$(window).load(function(){ 
     $('#rule_who').on('change', function() { 
      var elems = document.getElementsByTagName('div'); 
       for (var i = 0; i < elems.length; i++) { 
        if (elems[i].className != this.value) { 
         elems[i].style.display = 'none'; 
        } else { 
         elems[i].style.display = 'block'; 
        } 
       } 
     }); 
    });