Javascript Hide元素在IE上不起作用，但在Firefox上起作用

Question

我正在寻求帮助，因为我有一个我无法独自解决的问题。

我正在Zend_Framework上工作，当我的选择值不相关时，我想隐藏我的复选框。 实际上，我为此使用javascript，它在Firefox上运行良好。 但是，当我想在IE上对其进行测试时，它不起作用。 我的复选框未隐藏，而是在页面右侧移动。

我的JavaScript函数是：

function gestionEtat(id, value)
    {
                id_mat = "div_mat_"+id;
                var childStyle = document.getElementById(id_mat).firstChild.style;
                if(value != "non_concerne")
                {
                    childStyle.display="block";
                }
                else
                {
                    childStyle.display="none";
                }
    }

我的控制器是：（我有一个要求）

foreach ($rows as $edc)
{
$monEdc = new Zend_Form_Element_Select(
                    'edc_'.$edc['nomFormate_edc'],
                    array(
                            'label' => $edc['nom_edc'],
                            'elm_nl' => false,
                            'elm_size' => 6,
                            'onChange' => 'gestionEtat(this.id, this.value)',
                    )
            );
            $options = array(
                    'bon_etat' => 'Good state',
                    'a_changer' => 'Need to be changed',
                    'non_concerne' => 'Not concerned',
            );
            $monEdc->addMultiOptions($options);
            $this->addElement($monEdc);
            $gestionEdc = new Zend_Form_Element_MultiCheckbox(
                    'mat_edc_'.$edc['nomFormate_edc'],
                    array(
                            'label' => '',
                            'elm_size' => 3,
                            'multiOptions' => array(
                                    'necessary' => 'Necessary',
                                    'used' => 'Used',
                            )
                    )
            );
            $this->addElement($gestionEdc);

            $monEdc->addDecorators(array(
                    array('HtmlTag',array('tag'=>'div','id'=> 'div_edc_'.$edc['nomFormate_edc'],'style'=>'display:block;')))
            );

            $gestionEdc->addDecorators(array(
                    array('HtmlTag',array('tag'=>'div','id'=> 'div_mat_edc_'.$edc['nomFormate_edc'],'style'=>'display:block;')))
            );
}

你有什么办法可以帮助我吗？

Answer 1

使用CSS比通过JavaScript应用内联样式来隐藏或显示结帐要好。

在下面的演示中，我创建了一个.hidden类以应用于该复选框，当应用该复选框时，它将在视图中隐藏。

然后，我将事件侦听器应用于选择框，以触发该函数，该函数从复选框中添加或删除.hidden类。

这应该可以解决您在IE中面临的问题，因为您没有尝试在JavaScript中操作NodeList（跨浏览器的常见问题），而只是向元素添加或删除类。

 function gestionEtat(id, value) { var id_mat = "div_mat_" + id; var childStyle = document.getElementById(id_mat); if (value === "non_concerne") { // Add hidden class (use += ' hidden' if checkbox already has a class) childStyle.className = "hidden"; } else { // Remove hidden class from checkbox childStyle.className = ""; } } // Trigger gestionEtat function every time the select box changes var selectBox = document.getElementById("select"); selectBox.addEventListener('change', function() { gestionEtat(1, this.value); }); 

 .hidden { display: none; } 

 <select id="select"> <option>1</option> <option>2</option> <option>non_concerne</option> </select> <input id="div_mat_1" type="checkbox" /> 

Answer 2

终于，我找到了自己想做的事。 如果其他人遇到相同的问题，我会发布我的函数（我发现IE无法检测firstChild）

function gestionEtat(id, value)
{
    id_mat = "div_mat_"+id;
    var childStyle = document.getElementById(id_mat).firstChild.style;
    var childStyleIE = document.getElementById(id_mat).style;
    if(value != "non_concerne")
    {
        childStyle.display="block";
        childStyleIE.visibility="visible";
    }
    else
    {
        childStyle.display="none";
        childStyleIE.visibility="hidden";
    }
}