JQueryhide(）不适用于Mozzilla，但适用于Chrome

JQuery hide() not work on Mozzila but works on Chrome

本文关键字：适用于 Chrome Mozzilla JQueryhide 不适用      更新时间：2023-09-26

我有几个跨度，其中一个必须根据条件隐藏：

@for (int i = 0; i < Model.Options.Count; i++)
{
    <tr>
        <td> ... </td>
        <td>
            <span id="enabled_VALUE_@i">...</span>
            <span id="disabled_VALUE_@i">...</span>
        </td>
    </tr>
}

在jquery的某个地方我有：

for (var i = 0; i < tpoCount; i++) {
    var enabledVALUE = $('#enabled_VALUE_' + i + '');
    var disabledVALUE = $('#disabled_VALUE_' + i + '');
    ... Action ...
    if (result == 'True') {
        enabledVALUE.hide();
        disabledVALUE.show();
    }
    else {
        enabledVALUE.show();
        disabledVALUE.hide();
    }
}

在Chrome中运行良好，但在Firefox/Mozzila中由于某种原因span从不隐藏。

这很奇怪，因为在这个页面上，我还有另一个适用于Firefox/Mozzila的hide()。唯一的区别是它没有添加for帮助：

<tr>
    <td> ... </td>
    <td>
        <span id="enabled_FIX">...</span>
        <span id="disabled_FIX">...</span>
    </td>
</tr>

在jquery中：

if (result == 'True') {
    $('#enabled_FIX').hide();
    $('#enabled_FIX').show();
}
else {
    $('#enabled_FIX').show();
    $('#disabled_FIX').hide();
}

我不明白我错过了什么。我该如何防止此类问题？

将代码放入后尝试

$(document).ready(function(){
        //Your Code
});


for (var i = 0; i < 2; i++) {
 
    var enabledVALUE = $('#enabled_VALUE_' + i);
    var disabledVALUE = $('#disabled_VALUE_' + i);
   enabledVALUE.show()
   enabledVALUE.hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
        <td><span id="enabled_VALUE_0">test1</span>
            <span id="disabled_VALUE_0">test2</span></td>
        <td>
            <span id="enabled_VALUE_1">test3</span>
            <span id="disabled_VALUE_1">test4</span>
        </td>
    </tr>

如果有多个元素的标识符为enabledFix和disabledFix，则应该使用class而不是id。请检查这个jsfiddle-http://jsfiddle.net/asif1/68w0a1rg/1/

JS:

$(document).ready(function(){
    for (var i = 0; i < 3; i++) {
        //lets show the hidden data and hide the visible data
        disabled($('.enabledFix_' + i + ''));
        enabled($('.disabledFix_' + i + ''));
    }
});
function enabled(ob){
    ob.show();
}
function disabled(ob){
    ob.hide();
}

HTML:

<table>
  <tr>
      <td> <span class="enabledFix_1">John</span></td>
      <td> <span class="disabledFix_2">Doe</span></td>
  </tr>
  <tr>
      <td><span class="enabledFix_2">Jane</span></td>
      <td><span class="disabledFix_2">Doe</span></td>
  </tr>
</table>

CSS：

.disabledFix{
    display:none;
}
.enabledFix{
    display: block;
}
相关文章：