jQuery - .each() 输入值进行比较

Question

我正在尝试实现一些功能，比如当您将鼠标放在一个文本字段上时，它会突出显示具有相同值的所有输入字段。我在类里面做到了，但我很难理解输入的值(value)。

HTML

<input type='text' class='value1' value='sample1'>
<input type='text' class='value2' value='sample2'>
<input type='text' class='value2' value='sample3'>
<input type='text' class='value2' value='sample4'>

jQuery

$(document).ready(function(){

$("input.value2").each(function(){
    $("input.value2").on('mouseover',function(){
        $("input.value2").css('background-color','yellow');
    });
    $("input.value2").on('mouseout',function(){
        $("input.value2").css('background-color','#fff');
    });
});
});

Fiddle

尝试将鼠标放在第二个文本字段上。

Answer 1

1. 对所有输入使用通用类，例如我使用了 myClass
2. 使用.filter()找到具有相同值的输入。

$(document).ready(function () {
    $("input.myClass").on('mouseover', function () {
        var value = this.value;
        $("input.myClass").filter(function(){
            return value == this.value;
        }).css('background-color', 'yellow');
    }).on('mouseout', function () {
        var value = this.value;
        $("input.myClass").filter(function(){
            return value == this.value;
        }).css('background-color', '#fff');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='myClass' value='sample1'>
<input type='text' class='myClass' value='sample2'>
<input type='text' class='myClass' value='sample3'>
<input type='text' class='myClass' value='sample4'>