jQuery

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');
    });
});
});

Скрипка

Попробуй навести мышь на 2-е текстовое поле.

jquery css

0

rick jan cawaling 28 Фев 2015 в 19:34

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'>

1

Satpal 28 Фев 2015 в 16:41

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'>

1

Paul Roub 28 Фев 2015 в 16:50

jQuery - .each () входное значение для сравнения всего

2 ответа

Похожие вопросы

Новые вопросы