Question

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

首先，有两种类型的数据：关于价格和时间。我制作了2个单选按钮，当选中“价格”按钮时，会显示价格表，同时隐藏时间列表。

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

现在我想显示关于所选选项的更多信息，所以我为每个选项创建了一个div，其中style ='display：none'，当选择该选项时，我显示div的div，其中div的值=选项。

这部分代码在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，我试图用.change替换.click，我在hide（）/ show（）中尝试使用和不使用参数。

如果你们有任何想法，那将是非常友好的！

（对不起，我的代码是法语，但我认为即使你不懂法语也可以理解！）

编辑：reporter在评论中回答，非常感谢！

我们可以使用toggleClass（）代替show（）/ hide（）。在这种情况下，我不得不：

1-使用“display：none;”

创建一个css类

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

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

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

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

Answer 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>

Answer 2

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

JQuery hide（）/ show（）在FF / IE上运行，但不在Chrome上运行

2 个答案: