Question

Noob在这里。我目前正处于开发训练营（你们中的一些人可能不喜欢这些类型的东西）并且我在快节奏的环境中学到了很多东西！

无论如何，我已经编写了这个功能齐全的代码，但是我的教授告诉我使用jQuery重写这个代码（仅用于教学目的，个别偏见对哪个实践更好是不必要的）。我希望有人可以帮我写一些代码，其功能与我在下面发布的完全相同，除了使用jQuery代替vanilla JavaScript，因为我遇到了一些麻烦。提前致谢！

electa.page.populateStates = function (array) {
    var array = [
        { "id":  1, "countryCode": "NA", "stateCode": "NA", "regionName": ""        },
        { "id":  2, "countryCode": "AK", "stateCode": "US", "regionName": "Alaska"  }, 
        { "id":  3, "countryCode": "AL", "stateCode": "US", "regionName": "Alabama" },
        { "id": 82, "countryCode": "WY", "stateCode": "US", "regionName": "Wyoming" }
    ];
    var selectList = document.getElementById( 'location.state' );
    for ( var i = 0; i < array.length; i++ ) {
        var option = document.createElement( "option" );
        option.setAttribute( "value", array[ i ].id );
        option.text = array[ i ].regionName;
        selectList.appendChild( option );
    }
}

Answer 1

这是一个粗略的方法;我没有对它进行测试，但它应该为jQuery扮演更重要角色的同一解决方案提供坚实的基础。阅读评论;不要自我改变。如果您想成为一名优秀的程序员，请养成从您遇到的每个代码示例中学习的习惯。

// We'll still assign our function to the populateStates property the same way
// By naming the parameter `array`, I assume you expect an array to be passed in
electa.page.populateStates = function ( array ) {
    // If an array was passed in, we'll use it, otherwise, we'll provide our own
    // If the left-side of || is evaluated falsey, the right-side will be used instead
    var array = array || [ { "id": 1, "regionName": "" } ];
    // We'll need to locate our select element via a selector
    // We escape the period so jQuery doesn't look for something with a "state" class
    var selectList = $("#location\.state");
    // We can leverage jQuery's $.each method to loop over arrays
    // Modern browsers have functionality to do this on their own
    // See Array.prototype.forEach for instance
    $.each( array, function iteration ( index, obj ) {
        // This creates a new <option> element, and sets value/text accordingly
        // jQuery's $ function does many different things. Get familiar with it.
        $("<option></option>", {
            value: obj.id,
            text: obj.regionName
        // We can call the $.fn.appendTo method directly off the new <option>
        }).appendTo( selectList );
    });
};

进一步阅读：

Answer 2

我能做的最好的事情就是提供jQuery文档供你自己阅读：

阅读jQuery基础知识及其有用的原因：Essential jQuery start
了解jQuery和非jQuery对象：Iterating over jQuery and Non jQuery objects

与您的JavaScript帖子相关的一些基础知识：

<强> Loops

JavaScript for (var i = 0; i < array.length; i++) {

jQuery：$.each(array, function (index, properties) {

<强> Arrays in jQuery docs

不需要jQuery数组包装器

<强> Selectors

JavaScript：var selectList = document.getElementById('location.state')

jQuery：使用$('#hashtagForIDs')或$('.periodForClasses')选择元素，而不是document.getElementById()

Appending：

JavaScript：selectList.appendChild(option);

jQuery：使用上面描述的选择器$("select element to append to").append(what you want to append);，

Answer 3

我可能会做这样的事情。

electa.page.populateStates = function (array) {
    var array = [ {"id":1, "countryCode":"NA", "stateCode":"NA", "regionName":""}, { "id": 2, "countryCode": "AK ", "stateCode": "US", "regionName": "Alaska" }, { "id": 3, "countryCode": "AL ", "stateCode": "US", "regionName": "Alabama" }, { "id": 4, "countryCode": "AR ", "stateCode": "US", "regionName": "Arkansas" }, { "id": 6, "countryCode": "AZ ", "stateCode": "US", "regionName": "Arizona" }, { "id": 9, "countryCode": "CA ", "stateCode": "US", "regionName": "California" }, { "id": 10, "countryCode": "CO ", "stateCode": "US", "regionName": "Colorado" }, { "id": 11, "countryCode": "CT ", "stateCode": "US", "regionName": "Connecticut" }, { "id": 12, "countryCode": "DC ", "stateCode": "US", "regionName": "District of Columbia" }, { "id": 13, "countryCode": "DE ", "stateCode": "US", "regionName": "Delaware" }, { "id": 15, "countryCode": "FL ", "stateCode": "US", "regionName": "Florida" }, { "id": 17, "countryCode": "GA ", "stateCode": "US", "regionName": "Georgia" }, { "id": 18, "countryCode": "GU ", "stateCode": "US", "regionName": "Guam" }, { "id": 21, "countryCode": "HI ", "stateCode": "US", "regionName": "Hawaii" }, { "id": 22, "countryCode": "IA ", "stateCode": "US", "regionName": "Iowa" }, { "id": 23, "countryCode": "ID ", "stateCode": "US", "regionName": "Idaho" }, { "id": 24, "countryCode": "IL ", "stateCode": "US", "regionName": "Illinois" }, { "id": 25, "countryCode": "IN ", "stateCode": "US", "regionName": "Indiana" }, { "id": 26, "countryCode": "KS ", "stateCode": "US", "regionName": "Kansas" }, { "id": 27, "countryCode": "KY ", "stateCode": "US", "regionName": "Kentucky" }, { "id": 28, "countryCode": "LA ", "stateCode": "US", "regionName": "Louisiana" }, { "id": 30, "countryCode": "MA ", "stateCode": "US", "regionName": "Massachusetts" }, { "id": 32, "countryCode": "MD ", "stateCode": "US", "regionName": "Maryland" }, { "id": 33, "countryCode": "ME ", "stateCode": "US", "regionName": "Maine" }, { "id": 35, "countryCode": "MI ", "stateCode": "US", "regionName": "Michigan" }, { "id": 36, "countryCode": "MN ", "stateCode": "US", "regionName": "Minnesota" }, { "id": 37, "countryCode": "MO ", "stateCode": "US", "regionName": "Missouri" }, { "id": 39, "countryCode": "MS ", "stateCode": "US", "regionName": "Mississippi" }, { "id": 40, "countryCode": "MT ", "stateCode": "US", "regionName": "Montana" }, { "id": 42, "countryCode": "NC ", "stateCode": "US", "regionName": "North Carolina" }, { "id": 43, "countryCode": "ND ", "stateCode": "US", "regionName": "North Dakota" }, { "id": 44, "countryCode": "NE ", "stateCode": "US", "regionName": "Nebraska" }, { "id": 46, "countryCode": "NH ", "stateCode": "US", "regionName": "New Hampshire" }, { "id": 47, "countryCode": "NJ ", "stateCode": "US", "regionName": "New Jersey" }, { "id": 48, "countryCode": "NM ", "stateCode": "US", "regionName": "New Mexico" }, { "id": 52, "countryCode": "NV ", "stateCode": "US", "regionName": "Nevada" }, { "id": 54, "countryCode": "NY ", "stateCode": "US", "regionName": "New York" }, { "id": 55, "countryCode": "OH ", "stateCode": "US", "regionName": "Ohio" }, { "id": 56, "countryCode": "OK ", "stateCode": "US", "regionName": "Oklahoma" }, { "id": 58, "countryCode": "OR ", "stateCode": "US", "regionName": "Oregon" }, { "id": 59, "countryCode": "PA ", "stateCode": "US", "regionName": "Pennsylvania" }, { "id": 61, "countryCode": "PR ", "stateCode": "US", "regionName": "Puerto Rico" }, { "id": 65, "countryCode": "RI ", "stateCode": "US", "regionName": "Rhode Island" }, { "id": 67, "countryCode": "SC ", "stateCode": "US", "regionName": "South Carolina" }, { "id": 68, "countryCode": "SD ", "stateCode": "US", "regionName": "South Dakota" }, { "id": 72, "countryCode": "TN ", "stateCode": "US", "regionName": "Tennessee" }, { "id": 73, "countryCode": "TX ", "stateCode": "US", "regionName": "Texas" }, { "id": 74, "countryCode": "UT ", "stateCode": "US", "regionName": "Utah" }, { "id": 75, "countryCode": "VA ", "stateCode": "US", "regionName": "Virginia" }, { "id": 78, "countryCode": "VT ", "stateCode": "US", "regionName": "Vermont" }, { "id": 79, "countryCode": "WA ", "stateCode": "US", "regionName": "Washington" }, { "id": 80, "countryCode": "WI ", "stateCode": "US", "regionName": "Wisconsin" }, { "id": 81, "countryCode": "WV ", "stateCode": "US", "regionName": "West Virginia" }, { "id": 82, "countryCode": "WY ", "stateCode": "US", "regionName": "Wyoming" }]

    for (var i = 0; i < array.length; i++) {
        $('#location.state').append("<option value='" + array[i].id + "' >" + array[i].regionName + "</option>");
    }

}

将vanilla JavaScript转换为jQuery

3 个答案:

进一步阅读：