Question

我正在尝试实现类似于将鼠标放在一个文本字段上的内容时，它会突出显示具有相同值的所有输入字段。我是在上课的时候做的，但是我很难掌握输入的价值。

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

对所有输入使用公共类，例如我使用myClass
使用.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'>

Answer 2

您可以使用filter()仅查找其值与悬停字段相同的匹配元素：

$("input.value2").on('mouseover',function(){
  // store the value of the element that was hovered
  var val = this.value;

  $('input.value2').filter(

    // this function will be called once for each input.value2 element
    // filter will return a list of *only* those elements where this
    // function returns true

    function() { 
      // 
      return this.value == val; 
    }

  ).css('background-color','yellow');
});

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

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

jQuery - .each（）输入值来比较它

2 个答案: