关于javascript中的模糊

我的网页中有四个输入。要求是当用户填写1个输入时，其值应填写3个输入，3个输入颜色应变为红色，第二个输入相同。但当我们填充1个输入时，4个输入颜色变为红色

这里有一个例子

$（函数（）{
$（'input'）.blur（函数（）{
txtval（）
})      
})
函数txtval（）{
document.getElementById（'myid3'）。value=document.getElementById（'myid1'）。value；
document.getElementById（'myid4'）。value=document.getElementById（'myid2'）。value；
document.getElementById（'myid3'）.style.color=“#ff0000”
document.getElementById（'myid4'）.style.color=“#ff0000”
}
1.
2.
3.
4.

因为在所有输入模糊事件上都会调用txtval（）方法，并且您的方法不会处理任何情况以防止突出显示第二个输入。因此，方法中的所有4行都被执行，因此第4个输入也被着色

以下是更新的代码：

---

按如下方式更改html代码：

1
<input type="text" id="myid1" value="Enter name" rel="myid3" />
2
<input type="text" id="myid2" value="Enter name" rel="myid4" />
3
<input type="text" id="myid3" value="Enter name"/>
4
<input type="text" id="myid4" value="Enter name"/>

---

下面是一个例子，这是因为您为

输入
添加了事件处理程序
$（'input'）
，这意味着任何/所有
输入
的
blur
事件都应该调用
textval（）
。。你能做的就是

1） 将参数传递给
textval（）
指定要将哪个变为红色。
2） 您可以将事件处理程序附加到特定的
输入
，以指定需要变为红色的另一个
输入
。
检查此JSFIDLE


问题是因为模糊函数适用于所有输入元素

修改了一点代码，这样就不必更改或添加任何属性。。JU需要检查条件，这里有一个简单的解决方案。检查触发模糊事件的元素的
id
，并更新相应元素的
值和颜色：

$('input').blur(function(){
    if (this.id == 'myid1') {
      $('#myid3').css('color', '#FF0000').val(this.value);  
    } else if (this.id == 'myid2') {
      $('#myid4').css('color', '#FF0000').val(this.value);
    }            
})

为什么要混合使用js和jquery代码。看起来不像good@InternalServerError代码不是网站中的视觉元素。@Joonas我知道，我们应该鼓励遵循代码guidelines@InternalServerError编码准则？“在使用jquery时，你不应该编写普通的javascript，因为它看起来不太好”？我选择这个答案作为最佳答案，因为他确实对我的脚本做了很多修改
1
<input type="text" id="myid1" value="Enter name" rel="myid3" />
2
<input type="text" id="myid2" value="Enter name" rel="myid4" />
3
<input type="text" id="myid3" value="Enter name"/>
4
<input type="text" id="myid4" value="Enter name"/>

$(function(){

    $('input[rel]').each(function(){
       $(this).blur(function(){
           $("#" + $(this).attr("rel")).val($(this).val()).css('color','#FF0000') ;  
       });        
    });

})

$('input').blur(function(){
    if (this.id == 'myid1') {
      $('#myid3').css('color', '#FF0000').val(this.value);  
    } else if (this.id == 'myid2') {
      $('#myid4').css('color', '#FF0000').val(this.value);
    }            
})