用户输入后按值获取元素

Question

我有多个输入元素，我试图通过匹配值与另一个输入进行比较。

我遇到的问题是我无法将值匹配到用户输入，尽管如果两个输入我试图比较页面加载后已经有值。

JSFIDDLE

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<input type="text" class="list" value="1"> 
<input type="text" class="list" value="2"> 
<input type="text" class="list" value="3"> 
<br><br> 
<input type="text" id="a" class="find" value=""> 
<input type="text" id="b" class="find" value=""> 

<button id="trigger">Click Me</button> 

<script> 
$(document).on('click', '#trigger', function() { 
    $('.list').each(function() { 
     var value = $(this).val(); 
     var match = $('input.find[value="'+value+'"]').attr('id'); 
     alert(match); 
    }); 
}); 
</script> 

编辑

我想我应该指出的是，我通过循环第一组输入值，并通过多用户输入检查，所以我可以检索匹配用户输入的ID。更新我的代码和小提琴

Answer 1

编辑：它看起来像你正在寻找一个比我原来的更灵活的解决方案。

我用jQuery#each实现它。

$('#trigger').click(function() { 
 
    $('.list').each(function() { 
 
    var value = this.value, match 
 
    $('.find').each(function() { 
 
     if (this.value === value) { 
 
     // found a match! 
 
     match = this.id 
 
     return false 
 
     } 
 
    }) 
 
    console.log('value:', value, 'match:', match) 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="list" value="1"> 
 
<input type="text" class="list" value="2"> 
 
<input type="text" class="list" value="3"> 
 
<br><br> 
 
<input type="text" id="a" class="find" value=""> 
 
<input type="text" id="b" class="find" value=""> 
 
<button id="trigger">Click Me</button>

Answer 2

尝试这一点 - 对每个输入

$('#trigger').click(function() { 

    var a = $('#a').val(); 
    var match = $('input[value="'+a+'"]').attr('id'); 
    alert(match); 
}); 

Answer 3

运行和值

$('#trigger').click(function() { 
 
     var a = $('#a').val(); 
 
     $('input.find').each(function(){ 
 
     \t if (this.value === a) 
 
     \t alert(this.id); 
 
     }); 
 
    });

 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <input type="text" id="a" value="13.4"> 
 
    <input type="text" id="b" class="find" value="13.4"> 
 
    <input type="text" id="c" class="find" value="13.2"> 
 
    <input type="text" id="d" class="find" value="13.4"> 
 
    <button id="trigger">Click Me</button>

比较

fiddle

编辑：我认为你要与一个以上的输入，比较与类find

Answer 4

你可以尝试像以下：

$(function(){ 
 
    $('#trigger').click(function() { 
 
     var a = $('#a').val(); 
 
     var b = $(".find"); 
 
     if(a === b.val()){ 
 
      console.log('match found with id:'+b.attr('id')); 
 
     } else { 
 
      console.log('not any match found'); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="a" value="13.4"> 
 
<input type="text" id="b" class="find" value=""> 
 
<button id="trigger">Click Me</button>

Answer 5

如果您只是想比较值使用相等（==），请使用标识（===）的情况下，比较值，以及类型（如String），诠释等

$('#trigger').click(function() { 
 
    var a = $('#a').val(); 
 
    var b = $('#b').val(); 
 
    if(a==b) 
 
    alert("matched"); 
 
    else 
 
    alert("not matched"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="text" id="a" value="13.4"> 
 
<input type="text" id="b" class="find" value=""> 
 
<button id="trigger">Click Me</button>

Answer 6

使用jQuery.filter这样的：

$('#trigger').click(function() { 
 
    var val = $('#a').val();   // get the value of #a input 
 
    var inputs = $("input.find");  // get all the other inputs (the ones that have the class find) 
 

 
    inputs.removeClass("green"); 
 
    if (val.length) {     // if the value of #a is not empty 
 
    inputs.filter(function() {  // filter out all the inputs that have the same value 
 
     return $(this).val() === val; 
 
    }) 
 
    .addClass("green") 
 
    /* 
 
    .each(function() { 
 
     alert(this.id); 
 
    }); 
 
    */ 
 
    } 
 
});

.green { 
 
    background: lightgreen; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="a" value="13.4"> 
 
<input type="text" id="b" class="find" value=""> 
 
<input type="text" id="c" class="find" value=""> 
 
<input type="text" id="d" class="find" value=""> 
 
<button id="trigger">Click Me</button>