javascript - HTML 方法未使用 Document Ready 加载值

Question

我尝试在加载页面时加载 Bowflex 列的值，但它们不会显示。 .change 事件将加载它们，但 .ready 不会。我确信这对我来说是一个极其愚蠢的疏忽，但为什么它不在页面加载时加载“bowflex”的值？

<div id="treadmill" style="float:left; padding-right: 15px;">
    <div><h2>Bowflex</h2></div>
    <div class="comparison1"></div>
</div>
<div id="treadmill2" style="float:left; padding-right: 15px;">
    <div><select class="row2">
          <option value="">Compare With</option>
          <option value="solo">Solo</option>
          <option value="nordictrack">Nordictrack</option>
          <option value="bowflex">Bowflex</option>
        </select></div>
    <div class="comparison2"></div>
</div>
<div style="clear:both"></div>

<script>
    var treadmill_dict = {
            bowflex: "<div class='motor'>5hp</div><div class='length'>50in</div><div class='weight'>500lbs</div>",
            solo: "<div class='motor'>4.5hp</div><div class='length'>45in</div><div class='weight'>450lbs</div>",
            nordictrack: "<div class='motor'>4hp</div><div class='length'>40in</div><div class='weight'>400lbs</div>"
    };

    $( document ).ready(function() {
        $('#treadmill div.comparison1').html(treadmill_dict[bowflex]);
    });

    $( ".row2" ).change(function() {
        $('#treadmill2 div.comparison2').html(treadmill_dict[$(this).val()]);
    });

</script>

Answer 1

如果你要使用 json 键，方法是:

treadmill_dict[bowflex]

您需要在键名称两边加上引号:

treadmill_dict['bowflex']

像这样:

var treadmill_dict = {
    bowflex: "<div class='motor'>5hp</div><div class='length'>50in</div><div class='weight'>500lbs</div>",
    solo: "<div class='motor'>4.5hp</div><div class='length'>45in</div><div class='weight'>450lbs</div>",
    nordictrack: "<div class='motor'>4hp</div><div class='length'>40in</div><div class='weight'>400lbs</div>"
};

$(document).ready(function() {
    alert(treadmill_dict['bowflex']);
    $('#treadmill div.comparison1').html(treadmill_dict[bowflex]);
});

See it here