输入值上的 jQuery 切换类

发布于 2025-01-07 11:01:15 字数 1389 浏览 4 评论 0原文

我想根据文本输入的值向输入添加类。我的问题是输入呈现所有类。这是 html 部分：

<form name="imcForm" id="imc">
    <p>poids: <input type="text" name="poids" size="10"></p>
    <p>taille: <input type="text" name="taille" size="10"></p>
    <p><input type="button" id="calcul" value="Calculer" onClick="calculImc()"></p>
    <p>result : <input type="text" name="imc" size="10" id="imcResult"></p>
    <p>Interprétation: <input type="text" name="interpretation" size="25" id="interpretation"></p>
</form>

这是 javascript/jQuery

$('#calcul').on("click", function() {
    $("#interpretation:input[value=itemA]").toggleClass('a');
    $("#interpretation:input[value=itemB]").toggleClass('b');
    $("#interpretation:input[value=itemC]").toggleClass('c');
    $("#interpretation:input[value=itemD]").toggleClass('d');
    $("#interpretation:input[value=itemE]").toggleClass('e');
    $("#interpretation:input[value=itemF]").toggleClass('f');
    $("#interpretation:input[value=itemG]").toggleClass('g');
});

另外，看看渲染输入的内容：

<input type="text" id="interpretation" size="25" name="interpretation" class="denutrition normale moderee severe morbide">

那么为什么每个元素在单击时都会收到每个类？

原文

I want to add a class to an input depending on the value of the text input.
My problem is that the input renders all the classes.
Here is the html part :

<form name="imcForm" id="imc">
    <p>poids: <input type="text" name="poids" size="10"></p>
    <p>taille: <input type="text" name="taille" size="10"></p>
    <p><input type="button" id="calcul" value="Calculer" onClick="calculImc()"></p>
    <p>result : <input type="text" name="imc" size="10" id="imcResult"></p>
    <p>Interprétation: <input type="text" name="interpretation" size="25" id="interpretation"></p>
</form>

And here is the javascript/jQuery

$('#calcul').on("click", function() {
    $("#interpretation:input[value=itemA]").toggleClass('a');
    $("#interpretation:input[value=itemB]").toggleClass('b');
    $("#interpretation:input[value=itemC]").toggleClass('c');
    $("#interpretation:input[value=itemD]").toggleClass('d');
    $("#interpretation:input[value=itemE]").toggleClass('e');
    $("#interpretation:input[value=itemF]").toggleClass('f');
    $("#interpretation:input[value=itemG]").toggleClass('g');
});

Also, look at what render the input :

<input type="text" id="interpretation" size="25" name="interpretation" class="denutrition normale moderee severe morbide">

So why does each element recieve each class on click?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

撩动你心 2025-01-14 11:01:15

您在

此外，您还可以大大简化您的代码，特别是如果类名始终是输入字段中的最后一个字母。

$('#calcul').on'click', function(){
    var class = $('#interpretation').val().slice(-1).toLowerCase();
    $('#interpretation').toggleClass(class);
});

You're missing a > at the end of your <button> input.

Also you can greatly simplify the code you've got, especially if the class name is always the last letter of what's in the input field.

$('#calcul').on'click', function(){
    var class = $('#interpretation').val().slice(-1).toLowerCase();
    $('#interpretation').toggleClass(class);
});

回复收藏 0 原文

挽你眉间 2025-01-14 11:01:15

试试这个：

$('#calcul').on("click", function() {

    var target = $("#interpretation");
    var val =  target.val();
    var className = "";
    if(val == "itemA")                     
    {
        className = "a";
    }
    else if(val == "itemB")                     
    {
        className = "b";
    }
    else if(val == "itemC")                     
    {
        className = "c";
    }
    //............
    target.attr("class", className );
});

try this:

$('#calcul').on("click", function() {

    var target = $("#interpretation");
    var val =  target.val();
    var className = "";
    if(val == "itemA")                     
    {
        className = "a";
    }
    else if(val == "itemB")                     
    {
        className = "b";
    }
    else if(val == "itemC")                     
    {
        className = "c";
    }
    //............
    target.attr("class", className );
});

回复收藏 0 原文