对多个元素使用相同的功能

Question

I need this function to work on multiple elements in the form, right now it only works on TfDiagnosis . How do I use it on TfDiagnosis and TfDiagnosis2 with results in TfSnowmed and TfSnowmed2 ?

JQUERY

$(function snowmedlist() {
    $('#TfDiagnosis').on('click keyup change blur', function() {  
        if ($('#TfDiagnosis').val() == '[D]Anterograde amnesia (780.93)') {
            $('#TfSnowmed').val(206789002);
        }
        if ($('#TfDiagnosis').val() == '[D]Chills with fever (780.60)') {
            $('#TfSnowmed').val(206760004);
        }
    });
});

HTML

<input name="TfDiagnosis" type="text" id="TfDiagnosis" size="100">
<input type="text" name="TfSnowmed" id="TfSnowmed">
<input name="TfDiagnosis2" type="text" id="TfDiagnosis2" size="100" >
<input type="text" name="TfSnowmed2" id="TfSnowmed2"></td>

Answer 1

It's easy to work on groups of elements using class names.

<input name="TfDiagnosis" type="text" id="TfDiagnosis" class="diagnosis" size="100">
<input type="text" name="TfSnowmed" id="TfSnowmed">

js:

$('.diagnosis').on('click keyup change blur', function() {
    if($(this).val() == "...") {
        $(this).next().val(1.00);
    }
}) 

This way .next() is always the next element, so you don't need to keep passing IDs around. You can then store the data outside of the function to get rid of a cluster of IF statements:

var myData = []
myData['[D]Anterograde amnesia (780.93)'] = '206789002';
myData['[D]Chills with fever (780.60)'] = '206760004';

...then substitute the look-up from the array....

$('.diagnosis').on('click keyup change blur', function() {
        $(this).next().val(myData[$(this).attr(id)]);
}) 

Answer 2

You can use

$('#TfDiagnosis, #TfDiagnosis2').on('click keyup change blur', function() {  
     if($(this).attr('id') == 'TfDiagnosis' ){
           if ($(this).val() == '[D]Anterograde amnesia (780.93)') {
              $('#TfSnowmed').val(206789002);
           }
           if ($(this).val() == '[D]Chills with fever (780.60)') {
              $('#TfSnowmed').val(206760004);
           } 
       }else{
           //Stuff to do in case it is the #TfDiagnosis2
       }
    });

Answer 3

The most efficient way to make your function work on multiple inputs is to use event delegation:

$(document).on('click keyup change blur', 'input', function() {
    var value = $(this).val(); //Get the value only once 

    if (value == '[D]Anterograde amnesia (780.93)') {
        $('#TfSnowmed').val(206789002);
    }
    else if (value == '[D]Chills with fever (780.60)') {
        $('#TfSnowmed').val(206760004);
    }
});

Which will call the function for any input on the page. You probably want to assign a class to the specific inputs you want to use like so:

HTML

<input name="TfDiagnosis" type="text" id="TfDiagnosis" class="TfInput" size="100">
<input type="text" name="TfSnowmed" id="TfSnowmed" class="TfInput">
<input name="TfDiagnosis2" type="text" id="TfDiagnosis2" class="TfInput" size="100" >
<input type="text" name="TfSnowmed2" id="TfSnowmed2" class="TfInput">

JavaScript

$(document).on('click keyup change blur', '.TfInput', function() {
    var value = $(this).val(); //Get the value only once 

    if (value == '[D]Anterograde amnesia (780.93)') {
        $('#TfSnowmed').val(206789002);
    }
    else if (value == '[D]Chills with fever (780.60)') {
        $('#TfSnowmed').val(206760004);
    }
});