使用 jquery 获取输入字段的 ID 以传回颜色变化

Question

希望有人能指出我正确的方向。我知道有类似的问题，但我还没有找到直接处理我想要实现的目标的问题。我正在尝试获取输入字段的 ID，以便更改字体颜色。

<div id="red">
    <input id="redA" type="text">
    <input id="redB" type="text">
    <input id="redC" type="text">
</div>
<div id="outerContainer">
    <div id="innerContainer">
        <div id="blue">
             <input id="blueA" type="text" onBlur="check()">
             <input id="blueB" type="text" onBlur="check()">
             <input id="blueC" type="text" onBlur="check()">
        </div>
     </div>
</div>

<script>
    function check(){
        var v=$(this).val();
        if ( v=="red" ) { $(this).css({"color":"red"})
        if ( v=="green" ) { $(this).css({"color":"green"})
        if ( v=="blue" ) { $(this).css({"color":"blue"})
    }
</script>

我知道这有点啰嗦，但希望可以看到我正在尝试做的事情谢谢

Answer 1

你可以这样做

<div id="red">
    <input id="redA" type="text">
    <input id="redB" type="text">
    <input id="redC" type="text">
</div>
<div id="outerContainer">
    <div id="innerContainer">
        <div id="blue">
             <input id="blueA" type="text" onblur="check(this)">
             <input id="blueB" type="text" onblur="check(this)">
             <input id="blueC" type="text" onblur="check(this)">
        </div>
     </div>
</div>

JQuery

function check(vObj){
    console.log($(vObj));
    var v=$(vObj).val();
    if ( v=="red" ) { $(vObj).css({"color":"red"}); }
    if ( v=="green" ) { $(vObj).css({"color":"green"}); }
    if ( v=="blue" )  { $(vObj).css({"color":"blue"}); }
}

这是 http://jsfiddle.net/afPrc/109/

的 jsfiddle

您的 fiddle 不工作的原因是您没有将文本框的对象传递给函数。当您在函数内部执行 $(this) 时，它会获取 window 的对象而不是 textbox.

Answer 2

我会这样做 fiddle： http://jsfiddle.net/mzzq6ef9/

<div id="red">
        <input id="redA" type="text">
        <input id="redB" type="text">
        <input id="redC" type="text">
    </div>
    <div id="outerContainer">
        <div id="innerContainer">
            <div id="blue">
                 <input id="blueA" type="text">
                 <input id="blueB" type="text">
                 <input id="blueC" type="text">
            </div>
         </div>
    </div>

$("input").focus(function(){
    var v = $(this).closest('div').attr('id');
    if ( v =="red" ) { 
        $(this).css({"color":"red"});
    } else if ( v=="green" ) { 
        $(this).css({"color":"green"});
    } else { 
        $(this).css({"color":"blue"});
    }
});

Answer 3

好吧，我发现我在这里有点愚蠢，没有以任何正确的方式使用 'this'。

以防有人像我一样遇到这个问题并需要一个简单的答案。我的错误是我试图通过专门获取和使用 id 来识别元素。我不需要这样做，因为 'this' 在这里派上用场。

通过将 'this' 放在函数请求的括号中，它告诉函数它是这个意思！！

一个简单的例子

<style>
    #ColBox { width:40px; height:40px; }
</style>
<script>
    function func(el){
        var col=$(el).val();
        if ( col=="blue" || col=="red" || col=="green" ){
            $(el).css({"color":col});
            $("#ColBox").css({"background":col});
        } else {
            $(el).val("try again").css({"color":"black"});
        }
    }
</script>
<div>
<div>hello</div>
<div id="container">
    <div id="inner">
        <input id="one" type="text" onBlur="func(this);">
        <input id="two" type="text" onBlur="func(this);">
        <input id="three" type="text" onBlur="func(this);">
    </div>
    <div id="ColBox">
    </div>
</div>
</div>

使用 jquery 获取输入字段的 ID 以传回颜色变化

use jquery to get id of input field to pass back color change

css

jquery

input

this

attr