JavaScript：用 jQuery 获取一个值并替换它

Question

I have a gender selector, and a script that gets the value of the selected gender and pastes it on a label, but it's pasting the value: "M" or "F".

<div name="userLabelDiv" id="genderUserLabelDiv">
    <label class="required">Sexo</label>    
    <label id="genderLabel">F</label> 
</div>

Now when I'm trying to get this letter and replace for the actual gender, I'm missing on the JS script. Could you help me?

$("#genderLabel").html(
    if ($(this).value == 'F') {
        this.value = 'Female';
    }
    if ($(this).value == 'M') {
        this.value = 'Male';
    }
);

I know the script is probably wrong, could someone correct it, please? Thank you!

Answer 1

var gender = $('#genderLabel');
if (gender.text() == 'F') { gender.text('Female'); }
else { gender.text('Male'); }

Answer 2

replace every value with text()

if($(this).text()=='F'){
   $(this).text('Female');
}
if($(this).text()=='M'){
    $(this).text('Male');
}

Among a few other things

Answer 3

In jQuery 1.4+ you can pass a function to .text() like this:

$("#genderLabel").text(function(i, t) {
   return t == 'F' ? 'Female' : t == 'M' ? 'Male' : t;
});

This converts F to Female , M to Male and leaves anything else alone, in case new genders come up :)

Answer 4

To use .html() that way, you need to pass a function as the argument that returns the value you want.

Try it out: http://jsfiddle.net/FDZBJ/

$("#genderLabel").html(function(i,html) {
                           html = $.trim(html);
                           if(html == 'F') return 'Female';
                           if(html == 'M') return 'Male';
                           return html;
                       });