Question

我正在尝试使用PHP重新创建下面的JS。原因是编号的类和值实际上是从mysql数据库中提取的ID。我有一个区域表示报告正在创建，下面的代码显示并隐藏该报告的规则。由于不同的报告具有不同的规则，因此它显示和隐藏依赖于分组的规则，在下面的代码中确定为#rule_who。

当尝试重新创建以下内容时，我试图使用while循环但是它非常荒谬。在JavaScript或AJAX中是否有更有效的方式来显示和隐藏更适合使用大量div的div？ 2,3,4等等不应该是一个递增的数字，因为它依赖于ID，因此一些数字会随着报告的删除而消失。

任何帮助将不胜感激。感谢

<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>

编辑：谢谢大家的帮助。

我最终使用的是以下内容：

<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';
                    }
                }
        });
  });

使用PHP创建简单的JS

2 个答案: