相同class如何判断各自的事件

Question

有两个输入框架（移动端），当输入框获得焦点的时候会判断输入框是否有值，有值的话显示删除按钮，删除输入框的值，为空就会隐藏删除按钮，输入框失去焦点也会隐藏删除按钮，我现在是用同一个class（.uc-a1和imdeltxt）来控制的，但是这样会同时控制两个输入框，有什么办法在用同一个class下（不用id）实现只控制一个（有些地方不值两个输入框的），这样做主要是为了遍历整个客户端的输入框，要不然都要根据各自的id来判断很繁琐，请教各位了！
<script>
function shanchu() 
{ 
$(".uc-a1").val('');
$(".imdeltxt").hide(); }
function keydownup()
{
if($(".uc-a1").val()!="")
{
$(".imdeltxt").show();
}
else
{
$(".imdeltxt").hide();
}

}
function keyout()
{
$(".imdeltxt").hide();

}
function keyon()
{
if($(".uc-a1").val()!="")
{
$(".imdeltxt").show();
}
else
{
$(".imdeltxt").hide();
}


}
</script>
[code=html]
 <div class="uinn10">
            <div class="ub ub-ver uba b-gra uc-a t-bla c-wh">
                <div class="ubb b-gra uinn uc-t">
                    <!--文本开始-->
                    <div class="ub t-bla ulab ub-ac">
                        <div class="ulim ulev0">用户名：</div>
                        <div class="ub-f1 uinput uinn4">
                            <input style="width:10.5em;" placeholder="请输入手机号码" type="text" id="account" class="uc-a1" oninput="keydownup();"  onblur="keyout();" onfocus="keyon();" class="uc-a1">
<div class="ub ub-ac ub-pc"  style="position:absolute; top:0.05em; right:-0.7em; z-index:9999; width:2.5em;height:2em;"  ontouchstart="zy_touch('btn-act1')" onclick="shanchu()">
<div class="imdeltxt lis-icondel ub-img " id="accountdel" style="display:none;"></div>
</div>
                        </div>
                    </div><!--文本结束-->
                </div>
                <div class="uinn uc-b ">
                    <!--文本开始-->
                    <div class="ub t-bla ulab ub-ac">
                        <div class="ulim ulev0">密码：　</div>
                        <div class="ub-f1 uinput uinn4">
                            <input style="width:10.5em;" placeholder="请输入密码" type="password" id="paw" class="uc-a1" oninput="keydownup();"  onblur="keyout();" onfocus="keyon();" class="uc-a1">
<div class="ub ub-ac ub-pc"  style="position:absolute; top:0.05em; right:-0.7em; z-index:9999; width:2.5em;height:2em;"  ontouchstart="zy_touch('btn-act1')" onclick="shanchu()">
<div class="imdeltxt lis-icondel ub-img " id="pawdel" style="display:none;"></div>
</div>
                        </div>
                    </div><!--文本结束-->
                </div>
            </div>[/code]

Answer 1

function keyout(e){alert(e.nodeName);
var postEvent = e.nextSibling.nextSibling;//因为会有个空白结点。这个不好用，经常有兼容问题
alert(postEvent.nodeName);
postEvent.innerHTML = "成功";
}不怎么会用jquery，不过这样修改的大体意思，就是找到他的父节点，或者是兄弟节点。
然后对其进行操作。

Answer 2

很多办法的呀。它们不是有很多规律么？相同的索引，每个.imdeltxt元素在.uc-a1之后的元素内。都可以成为你操作的依据
先从你的代码中把那些oninput="keydownup();"  onblur="keyout();" onfocus="keyon();"什么的移除，而且class="uc-a1"也多写了一次。。<script type="text/javascript">
                    $(function(){
                        //方法一：根据索引
                        $('.uc-a1').each(function(i){
                            $(this).bind("keyup blur",function(){
                                if($(this).val()!=''){
                                    $(".imdeltxt").eq(i).show();
                                }else{
                                    $(".imdeltxt").eq(i).hide();
                                }
                            })
                        });
                        //方法二：根据元素位置
                        $('.uc-a1').bind("keyup blur",function(){
                            if($(this).val()!=''){
                                $(this).next().find(".imdeltxt").show();
                            }else{
                                $(this).next().find(".imdeltxt").hide();
                            }
                        })
                    })
                </script>

Answer 3

根据索引的也可以简写成这样 //根据索引
                       $('.uc-a1').bind("keyup blur",function(){
                            var i=$(this).index('.uc-a1');
                            if($(this).val()!=''){
                                $('.imdeltxt').eq(i).show();
                            }else{
                                $('.imdeltxt').eq(i).hide();
                            }
                        })

Answer 4

function checkInput(this){
  $(this) 就是针对当前的具体某个class了
}<input type="text" class="uc1" onblur="checkInput(this)">
<input type="text" class="uc1" onblur="checkInput(this)">
当然你可以想说这样每个都要加onblur ， 不然你直接用ID也就可以了，但是这样的写法比每个加ID 我感觉结构感要好很多，至少不会因为ID变化而变化。