用戶輸入後按值獲取元素

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>