Element nach Wert nach Benutzereingabe abrufen

Question

Ich habe mehrere Eingabeelemente und versuche, mit anderen Werten zu vergleichen.

Das Problem, das ich habe, ist, kann ich nicht Werte mit der Benutzereingabe übereinstimmen, obwohl es funktioniert, wenn beide Eingabe, die ich versuche zu vergleichen, bereits Werte nach dem Laden der Seite haben.

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> 

EDIT

Ich glaube, ich habe darauf hingewiesen, sollte, dass ich durch den ersten Satz von Eingangswerten bin Looping und mehrere Benutzereingaben Überprüfung durch, so kann ich das abrufen ID der übereinstimmenden Benutzereingabe. Aktualisiert mein Code und Geige

Answer 1

Edit: Es sieht aus wie Sie suchten nach einer flexibleren Lösung als meine ursprüngliche.

Ich implementierte es mit 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

dies versuchen -

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

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

Answer 3

Run auf jedem der Eingänge und vergleichen Wert

$('#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

EDIT: Ich nahm an, dass Sie mit mehr als einem Eingang mit der Klasse find

Answer 4

Sie könnten versuchen, vergleichen möchte etwas wie folgt aus:

$(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

Wenn Sie nur Werte vergleichen möchten, verwenden Sie die Gleichheit (==), verwenden Sie die Identität (===), falls Wert zu vergleichen sowie die Art wie string, int usw.

$('#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

Verwenden jQuery.filter wie folgt aus:

$('#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>