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";
    }
}

Javascript隐藏元素不能在IE上运行但可以在Firefox上运行

2 个答案: