JQuery hide()/show() 在 FF/IE 但不是 Chrome

Posted

技术标签:

【中文标题】JQuery hide()/show() 在 FF/IE 但不是 Chrome【英文标题】:JQuery hide()/show() working on FF/IE but not Chrome 【发布时间】:2018-10-25 00:49:45 【问题描述】:

我有一个网页,我在其中使用 sql/php 创建一个选择选项在我的数据库中的位置:每个选项的值是数据库上的 id。 有了这个,我使用 JQuery 3.3.1:这是我第一次使用它,所以我认为我的语法可能不好。

首先有两种类型的数据:关于价格和关于时间。 我做了2个单选按钮,当“价格”按钮被选中时,价格表显示而时间列表被隐藏。

这部分代码在 FF/IE/Chrome 上运行良好。

现在我想显示有关所选选项的更多信息,所以我为style ='display的每个选项做了一个div,并且选择了选项时,我将显示div id的ID =值选项。

这部分代码在 FF/IE 上运行良好,但在 Chrome 上运行良好。

这是我的代码,我只写了几个我可以在这里得到的例子来替换数据库调用:

$(document).ready(function() 
    $('input[type="radio"]').click(function() 
        if ($(this).attr("value") == "prix") 
            $("#prix").show('fast');
            $("#temps").hide('fast');
            $("#" + $(this).attr("value") + "_prix").siblings().hide('fast');
            $("#" + $(this).attr("value") + "_prix").show('fast');
        
        if ($(this).attr("value") == "temps") 
            $("#prix").hide('fast');
            $("#temps").show('fast');
            $("#" + $(this).attr("value") + "_temps").siblings().hide('fast');
            $("#" + $(this).attr("value") + "_temps").show('fast');
        
    );
    $('input[type="radio"]').trigger('click');
);


function showDetailsCriterePrix(id) 
    $("#" + id + "_prix").siblings().hide('fast');
    $("#" + id + "_prix").show('fast');


function showDetailsCritereTemps(id) 
    $("#" + id + "_temps").siblings().hide('fast');
    $("#" + id + "_temps").show('fast');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br><br> Le critère à supprimer concerne le :
<input type="radio" name="cat_critere" value="temps" required>Temps
<input type="radio" name="cat_critere" value="prix" checked required>Prix
<div id="prix" style="display:none">
   <br><br> Choisissez un critère de prix à supprimer :
   <select name="idToDelPrix">
      <option value="1" onclick='showDetailsCriterePrix(this.value);'>Nombre de caisses [AVE] </option>
      <option value="2" onclick='showDetailsCriterePrix(this.value);'>Nombre d'associés [AVE] </option>
      <option value="3" onclick='showDetailsCriterePrix(this.value);'>Nombre de salariés [AVE] </option>
      <option value="4" onclick='showDetailsCriterePrix(this.value);'>Nombre de TVA [AVE] </option>
   </select>
   <div id="wrapperPrix">
      <div id="1_prix" style="display:none"> Taux prix : 175<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div>
      <div id="2_prix" style="display:none"> Taux prix : 100<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div>
      <div id="3_prix" style="display:none"> Taux prix : 100<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div>
      <div id="4_prix" style="display:none"> Taux prix : 1<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div>
   </div>
</div>
<div id="temps" style="display:none">
   <br><br> Choisissez un critère de temps à supprimer :
   <select name="idToDelTemps">
      <option value="1" onclick='showDetailsCritereTemps(this.value);'>Temps1 [AVE] </option>
      <option value="2" onclick='showDetailsCritereTemps(this.value);'>Temps2 [AVE] </option>
      <option value="3" onclick='showDetailsCritereTemps(this.value);'>Temps3 [AVE] </option>
      <option value="4" onclick='showDetailsCritereTemps(this.value);'>Temps4 [AVE] </option>
   </select>
   <div id="wrapperTemps">
      <div id="1_temps" style="display:none"> Taux temps : 175<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div>
      <div id="2_temps" style="display:none"> Taux temps : 100<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div>
      <div id="3_temps" style="display:none"> Taux temps : 100<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div>
      <div id="4_temps" style="display:none"> Taux temps : 1<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div>
   </div>
</div>

我不知道为什么这在 Chrome 上不起作用,我尝试将 .click 替换为 .change,我尝试在 hide()/show() 中使用和不使用参数。

如果你们有任何想法,那就太好了!

(对不起,我的代码是法语的,但我认为即使你不懂法语也可以理解!)

编辑:由reporter 在 cmets 中回答,非常感谢!

我们可以使用 toggleClass() 来代替使用 show()/hide()。在这种情况下,我必须:

1- 使用“display:none;”创建一个 css 类

2- 用这个类替换我的 div 的样式

[2.5- 在我的选择中添加一个 id(之前应该这样做)]

3- 在我的选择上添加一个事件,该事件获取所选选项的值并切换具有相同 id 的 div 的类。

4- 删除现在无用的 showDetailsCriteres 函数

【问题讨论】:

顺便说一句,我正在使用:Firefox 59.0.3;互联网浏览器 11;谷歌浏览器 66 ; 你为什么不把style="display:none"转换成一个css类并使用toggle(&lt;classname&gt;) 没想到! Ty 我正在尝试它! 工作得很好,我会尽快编辑我的帖子以添加工作代码!谢谢! 【参考方案1】:

您可以简单地绑定下拉菜单的 onchange 事件,而不是将 onclick 事件绑定到每个选项。

     function PrixChange(ctrl)
     var id = $(ctrl).val();
       $("#" + id + "_prix").siblings().hide('fast');
        $("#" + id + "_prix").show('fast');

    

 <select name="idToDelPrix" onchange="PrixChange(this);">
      <option value="1" onclick='showDetailsCriterePrix(this.value);'>Nombre de caisses [AVE] </option>
      <option value="2" onclick='showDetailsCriterePrix(this.value);'>Nombre d'associés [AVE] </option>
      <option value="3" onclick='showDetailsCriterePrix(this.value);'>Nombre de salariés [AVE] </option>
      <option value="4" onclick='showDetailsCriterePrix(this.value);'>Nombre de TVA [AVE] </option>
   </select>

【讨论】:

但在这种情况下,我认为在下拉列表中绑定 onclick 事件更合适:当显示列表时,一个选项已经被“选中”,如果您尝试选择此选项,则不会显示任何信息onchange 不会触发。 为您的下拉列表提供一个 id: "idToDelPrix" 并将此行放入您的文档中:PrixChange($("#idToDelPrix")); 所以当文档准备好时,这将触发在名为 #idToDelPrix 的选择中显示所选选项的函数?没想到这个,你!【参考方案2】:

您可以切换类名定义属性无。您可以尝试.on 事件而不是.click 事件

【讨论】:

以上是关于JQuery hide()/show() 在 FF/IE 但不是 Chrome的主要内容,如果未能解决你的问题,请参考以下文章

.show() 和 .hide() 如何在 jquery 中工作 [重复]

关于JQUERY中的hide()和show()

如何在 Jquery 中将 delay() 与 show() 和 hide() 一起使用

请教jquery的hide()和show()方法遇到的问题

jquery的hide和show方法疑问

JQuery .show() 方法在 .hide 之后不起作用