我有一个网页,在其中使用 sql/php 创建一个选择,其中选项位于我的数据库中:每个选项的值是数据库上的 id。 为此,我使用 JQuery 3.3.1:这是我第一次使用它,所以我认为我的语法可能很糟糕。
首先有两种类型的数据:关于价格和关于时间。 我制作了 2 个单选按钮,当选中“价格”按钮时,会显示价格列表,同时隐藏时间列表。
这部分代码在 FF/IE/Chrome 上运行良好。
现在我想显示有关所选选项的更多信息,因此我使用 style='display:none' 为每个选项创建了一个 div,当选择该选项时,我显示该 div,其中 div 的 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 上不起作用,我尝试用 .change 替换 .click,我尝试在 hide()/show() 中使用和不使用参数。
如果你们有任何想法,那就太好了!
(抱歉,我的代码是法语,但我认为即使您不懂法语也是可以理解的!)
编辑:由 reporter 回答评论里,非常感谢!
我们可以使用toggleClass()来代替show()/hide()。在这种情况下,我必须:
1- 创建一个带有“display:none;”的 css 类
2-用此类替换我的div的样式
[2.5- 将 id 添加到我的选择中(之前应该这样做)]
3- 在我的选择上添加一个事件,获取所选选项的值并切换具有相同 id 的 div 的类。
4-删除现在无用的 showDetailsCriteres 函数
最佳答案
您可以简单地绑定(bind)下拉菜单的 onchange 事件,而不是将 onclick 事件绑定(bind)到每个选项。
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>
关于javascript - JQuery hide()/show() 适用于 FF/IE,但不适用于 Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50345917/