Question

目标：

从列表中选择一年
有能力改变年份（如果意外点击）
重新加载所有年份
选择其他年份

jQuery :(这是我失败的黑客攻击;请建议正确实施）

$('#year tr td').click(function() {
  $('#year tr td').removeClass('selected');
  var year = $(this).addClass('selected');
  $('#year').hide();
  $('#vehicle_year').prepend(year).show();
});

$('#reset').click(function() {
  $("[prepended=yes]", "#vehicle_year").remove();
  $('#vehicle_year').hide();
  $('#year tr td').removeClass('selected');
  $('#year').show();
});

HTML：

<span id="vehicle_year" style="display: none"> <span id="reset">(change year)</span> </span>
<table id="year" class="vehicle_options">
    <tbody><tr>
      <td id="1980">1980</td>
      <td id="1981">1981</td>
      <td id="1982">1982</td>
      <td id="1983">1983</td>
      <td id="1984">1984</td>
      <td id="1985">1985</td>
      <td id="1986">1986</td>
    </tr>
    <tr>
      <td id="1987">1987</td>
      <td id="1988">1988</td>
      <td id="1989">1989</td>
      <td id="1990">1990</td>
      <td id="1991">1991</td>
      <td id="1992">1992</td>
      <td id="1993">1993</td>
    </tr>
    <tr>
      <td id="1994">1994</td>
      <td id="1995">1995</td>
      <td id="1996">1996</td>
      <td id="1997">1997</td>
      <td id="1998">1998</td>
      <td id="1999">1999</td>
      <td id="2000">2000</td>
    </tr>
    <tr>
      <td id="2001">2001</td>
      <td id="2002">2002</td>
      <td id="2003">2003</td>
      <td id="2004">2004</td>
      <td id="2005">2005</td>
      <td id="2006">2006</td>
      <td id="2007">2007</td>
    </tr>
    <tr>
      <td id="2008">2008</td>
      <td id="2009">2009</td>
      <td id="2010">2010</td>
      <td id="2011">2011</td>
      <td id="2012">2012</td>
      <td id="2013">2013</td>
      <td id="2014">2014</td>
    </tr>
    <tr>
      <td id="2015">2015</td>
    </tr>
</tbody></table>

jsFiddle ：http://jsfiddle.net/32ta6/

Answer 1

在这里查看小提琴。基本上，您对$('#vehicle_year').prepend(year).show();的调用会将值放在开放的<html>代码中，以便检索它们。

http://jsfiddle.net/32ta6/12/

<table id="year" class="vehicle_options">
    <tbody><tr>
      <td id="1980">1980</td>
      <td id="1981">1981</td>
      <td id="1982">1982</td>
      <td id="1983">1983</td>
      <td id="1984">1984</td>
      <td id="1985">1985</td>
      <td id="1986">1986</td>
    </tr>
    <tr>
      <td id="1987">1987</td>
      <td id="1988">1988</td>
      <td id="1989">1989</td>
      <td id="1990">1990</td>
      <td id="1991">1991</td>
      <td id="1992">1992</td>
      <td id="1993">1993</td>
    </tr>
    <tr>
      <td id="1994">1994</td>
      <td id="1995">1995</td>
      <td id="1996">1996</td>
      <td id="1997">1997</td>
      <td id="1998">1998</td>
      <td id="1999">1999</td>
      <td id="2000">2000</td>
    </tr>
    <tr>
      <td id="2001">2001</td>
      <td id="2002">2002</td>
      <td id="2003">2003</td>
      <td id="2004">2004</td>
      <td id="2005">2005</td>
      <td id="2006">2006</td>
      <td id="2007">2007</td>
    </tr>
    <tr>
      <td id="2008">2008</td>
      <td id="2009">2009</td>
      <td id="2010">2010</td>
      <td id="2011">2011</td>
      <td id="2012">2012</td>
      <td id="2013">2013</td>
      <td id="2014">2014</td>
    </tr>
    <tr>
      <td id="2015">2015</td>
    </tr>
</tbody></table>


<span id="vehicle_year" style="display: none"><span id="selectedYear"></span> <span id="reset">(change year)</span> </span>

的javascript：

//select year
$('#year tr td').click(function() {
  $('#year tr td').removeClass('selected');
  var year = $(this).addClass('selected').prop('innerText');
  $('#year').hide();
  $('#selectedYear').html(year);
  $('#vehicle_year').show();
});

$('#reset').click(function() {
  $('#vehicle_year').hide();
  $('#year tr td').removeClass('selected');
  $('#year').show();
});

Answer 2

在这里，它类似于ps2goat，但删除了不需要的代码并修复了被删除的年份。

http://jsfiddle.net/32ta6/7/

//select year
$('#year tr td').click(function() {
 // $('#year tr td').removeClass('selected');
  var year = $(this).text();
  $('#year').hide();
  $('#selectedYear').html(year);
  $('#vehicle_year').show();
});

$('#reset').click(function() {
  //$("[prepended=yes]", "#vehicle_year").remove();
  $('#vehicle_year').hide();
  //$('#year tr td').removeClass('selected');
  $('#year').show();
});

＆LT;

table id="year" class="vehicle_options">
    <tbody><tr>
      <td id="1980">1980</td>
      <td id="1981">1981</td>
      <td id="1982">1982</td>
      <td id="1983">1983</td>
      <td id="1984">1984</td>
      <td id="1985">1985</td>
      <td id="1986">1986</td>
    </tr>
    <tr>
      <td id="1987">1987</td>
      <td id="1988">1988</td>
      <td id="1989">1989</td>
      <td id="1990">1990</td>
      <td id="1991">1991</td>
      <td id="1992">1992</td>
      <td id="1993">1993</td>
    </tr>
    <tr>
      <td id="1994">1994</td>
      <td id="1995">1995</td>
      <td id="1996">1996</td>
      <td id="1997">1997</td>
      <td id="1998">1998</td>
      <td id="1999">1999</td>
      <td id="2000">2000</td>
    </tr>
    <tr>
      <td id="2001">2001</td>
      <td id="2002">2002</td>
      <td id="2003">2003</td>
      <td id="2004">2004</td>
      <td id="2005">2005</td>
      <td id="2006">2006</td>
      <td id="2007">2007</td>
    </tr>
    <tr>
      <td id="2008">2008</td>
      <td id="2009">2009</td>
      <td id="2010">2010</td>
      <td id="2011">2011</td>
      <td id="2012">2012</td>
      <td id="2013">2013</td>
      <td id="2014">2014</td>
    </tr>
    <tr>
      <td id="2015">2015</td>
    </tr>
</tbody></table>


<span id="vehicle_year" style="display: none"><span id="selectedYear"></span> <span id="reset">(change year)</span> </span>

Answer 3

$('#year tr td').click(function() {
  var that = $(this); 
  var year = that.attr("id"); 
  $('#year tr td').removeClass('selected');
  that.addClass('selected');
  $('#year').hide();
  $('#vehicle_year').prepend(year).show();
});

这有效：http://jsfiddle.net/32ta6/11/

如何只选择table / div中的一个元素？

3 个答案: