HTML方法未使用文档就绪加载值

时间:2015-02-17 17:29:39

标签: javascript jquery

我正在尝试在加载页面时加载bowflex列的值,但是它们不会显示。 .change事件将加载它们,但.ready没有。我确信这对我来说是一种令人难以置信的愚蠢疏忽,但为什么它并没有为'#34; 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>

1 个答案:

答案 0 :(得分: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