Question

HTML

<!-- YEAR -->
<div id="vehicle_year">
  <h3>Vehicle Year</h3>

  <table id="year" class="vehicle_options">
      <tbody><tr>
        <td id="2015">2015</td>
        <td id="2014">2014</td>
        <td id="2013">2013</td>
        <td id="2012">2012</td>
        <td id="2011">2011</td>
      </tr>
      <tr>
        <td id="2010">2010</td>
        <td id="2009">2009</td>
        <td id="2008">2008</td>
        <td id="2007">2007</td>
        <td id="2006">2006</td>
      </tr>
  </tbody></table>
<span id="year_selected"></span> 
</div>

<!-- MAKE -->
<div id="vehicle_make" style="display: none">
  <h3>Vehicle Make</h3>

  <table id="make" class="vehicle_options">
      <tbody><tr>
        <td id="AM General">AM General</td>
        <td id="Acura">Acura</td>
        <td id="Alfa Romeo">Alfa Romeo</td>
        <td id="Aston Martin">Aston Martin</td>
        <td id="Audi">Audi</td>
      </tr>
      <tr>
        <td id="BMW">BMW</td>
        <td id="Bentley">Bentley</td>
        <td id="Bugatti">Bugatti</td>
        <td id="Buick">Buick</td>
        <td id="Cadillac">Cadillac</td>
      </tr>
  </tbody></table>
<span id="make_selected"></span> 
</div>


<!-- MODEL -->
<div id="vehicle_model" style="display: none">
  <h3>Vehicle Model</h3>

  <table id="model" class="vehicle_options">
        <!-- model options -->
  </table>
<span id="model_selected"></span> 
</div>

<!-- VEHICLE PART 2 QUESTIONS -->
<div id="vehicle_part_2" style="display: none;">
  SHOW THIS DIV - NOT WORKING - MODEL IS NOT BEING SET
</div>

的jQuery

//select year, model, make
function selectVehicle(id, current_options, selected, next_option, build_models) {
  $(id).click(function() {
    var select = $(this).text();
    $(current_options).hide();
    var vehicle_make = $(selected).html(select).show();
    $(next_option).fadeIn();

    if (build_models)
      generateModelsList(model_hash[vehicle_make.html()]);
  });  
}

function generateModelsList(model_list) {
    var pageSize = 5;
    var pageCount = model_list.length / pageSize;

    for (var page = 0; page < pageCount; page++) {
        var pageElements = model_list.slice(page * pageSize, (page + 1) * pageSize);
        debugger;
        var newTr = $('<tr>');
        $.each(pageElements, function (index, value) {
            $('<td>', {
                text: value,
                id:   value
            }).appendTo(newTr);
        });

        newTr.appendTo('#model');
    }
}

$(document).ready(function() {
  selectVehicle('#year tr td', '#year', '#year_selected', '#vehicle_make');
  selectVehicle('#make tr td', '#make', '#make_selected', '#vehicle_model', true);
  selectVehicle('#model tr td', '#model', '#model_selected', '#vehicle_part_2');
});

model_hash = {"AM General":["Hummer"], "Acura":["CL", "ILX", "ILX Hybrid", "Integra", "Legend", "MDX", "NSX", "RDX", "RL", "RLX", "RSX", "SLX", "TL", "TLX", "TSX", "TSX Sport Wagon", "Vigor", "ZDX"], "Alfa Romeo":["4C"], "Aston Martin":["DB7", "DB9", "DBS", "Rapide", "Rapide S", "V12 Vanquish", "V12 Vantage", "V8 Vantage", "Vanquish", "Virage"], "Audi":["100", "200", "80", "90", "A3", "A3 e-tron", "A4", "A5", "A6", "A7", "A8", "Cabriolet", "Coupe", "Q1", "Q3", "Q5", "Q7", "R8", "RS 4", "RS 5", "RS 6", "RS 7", "S3", "S4", "S5", "S6", "S7", "S8", "SQ5", "TT", "TT RS", "TTS", "V8", "allroad", "allroad quattro"], "BMW":["1 Series", "1 Series M", "2 Series", "3 Series", "3 Series Gran Turismo", "4 Series", "4 Series Gran Coupe", "5 Series", "5 Series Gran Turismo", "6 Series", "6 Series Gran Coupe", "7 Series", "8 Series", "ALPINA B7", "ActiveHybrid 5", "ActiveHybrid 7", "ActiveHybrid X6", "Alpina", "M", "M3", "M4", "M5", "M6", "M6 Gran Coupe", "X1", "X3", "X4", "X5", "X5 M", "X6", "X6 M", "Z3", "Z4", "Z4 M", "Z8", "i3", "i8"], "Bentley":["Arnage", "Azure", "Azure T", "Brooklands", "Continental", "Continental Flying Spur", "Continental Flying Spur Speed", "Continental GT", "Continental GT Speed", "Continental GTC", "Continental GTC Speed", "Continental Supersports", "Continental Supersports Convertible", "Flying Spur", "Mulsanne", "Supersports Convertible ISR"], "Bugatti":["Veyron 16.4"]};

-->

第二步没有显示。似乎没有设置model。为什么会这样？在演示中点击 - ＆gt; 2013, BMW, Series 7

这应该将模型设置为Series 7并加载<div id="vehicle_part_2">，但它不起作用。

DEMO：jsFiddle：http://jsfiddle.net/uLncL/1/

Answer 1

您的内容是动态生成的，您不想使用“点击”，您应该使用“开启”：

  $('body').on('click', id, function() {

这会将侦听器附加到 body ，然后单击它时会查找您的ID

一般来说，你不想附加到 body ，因为它在DOM中如此之高，但在那个例子中，我看不到任何较低的附加值。

这是你的小提琴：http://jsfiddle.net/uLncL/2/

jQuery遇到选择器问题

1 个答案: