Javascript 隐藏元素不适用于 IE 但适用于 Firefox

Question

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

我正在研究 Zend_Framework，我想在 select 的值处于不关心状态时隐藏我的复选框。实际上，我为此使用 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 class 来应用到复选框，应用时会隐藏它。

然后我将事件侦听器应用到 select 框以触发从复选框中添加或删除 .hidden class 的功能。

这应该可以解决您在 IE 中面临的问题，因为您不是在尝试操作 JavaScript（跨浏览器问题的公共区域）中的 NodeList，而是简单地添加或删除 class到元素。

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

终于，我找到了我想做的事。如果其他人遇到同样的问题，我 post 我的功能（我发现 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";
    }
}

Javascript 隐藏元素不适用于 IE 但适用于 Firefox

Javascript Hide element not working on IE but works on Firefox

javascript

internet-explorer

zend-framework

hide