jQuery同时使用addClass和removeClass

时间：2016-09-13 17:28:02

标签： javascript jquery

我在 Fiddle 中有我的代码链接。

HTML： 

<table border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_1" id="event_type_1" tabindex="24" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_1" type="text" id="event_names_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="24">
  </td>
  <td class="padding-right-5">
    <input name="school_1" type="text" id="school_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="25" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_1" type="tel" id="event_time_score_1" class="form-control responsive-placeholder text-center" tabindex="26" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
<tr style="display: none;">
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_2" id="event_type_2" tabindex="27" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_2" type="text" id="event_names_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="27">
  </td>
  <td class="padding-right-5">
    <input name="school_2" type="text" id="school_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="28" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_2" type="tel" id="event_time_score_2" class="form-control responsive-placeholder text-center" tabindex="29" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
<tr style="display: none;">
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_3" id="event_type_3" tabindex="30" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_3" type="text" id="event_names_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="30">
  </td>
  <td class="padding-right-5">
    <input name="school_3" type="text" id="school_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="31" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_3" type="tel" id="event_time_score_3" class="form-control responsive-placeholder text-center" tabindex="32" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
<tr style="display: none;">
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_4" id="event_type_4" tabindex="33" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_4" type="text" id="event_names_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="33">
  </td>
  <td class="padding-right-5">
    <input name="school_4" type="text" id="school_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="34" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_4" type="tel" id="event_time_score_4" class="form-control responsive-placeholder text-center" tabindex="35" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
<tr style="display: none;">
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_5" id="event_type_5" tabindex="36" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_5" type="text" id="event_names_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="36">
  </td>
  <td class="padding-right-5">
    <input name="school_5" type="text" id="school_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="37" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_5" type="tel" id="event_time_score_5" class="form-control responsive-placeholder text-center" tabindex="38" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
<tr style="display: none;">
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_6" id="event_type_6" tabindex="39" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_6" type="text" id="event_names_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="39">
  </td>
  <td class="padding-right-5">
    <input name="school_6" type="text" id="school_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="40" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_6" type="tel" id="event_time_score_6" class="form-control responsive-placeholder text-center" tabindex="41" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
</tbody>
</table>

JS： 

$(function() {
    $('table').on('click', '.hide-row', function(e) {
        console.log('hidden!');
        $( this ).parent().parent().hide();
    });


  $('.add-row').click(function(e) {
    $( this ).html('Hide').removeClass('add-row').addClass('hide-row');
    $( this ).parent().parent().next().show();
  });


});

我想要做的是当用户点击“添加行”时显示另一行。用户点击的按钮然后变成一个按钮，同时删除它所在的行。

正在发生的事情是它显示了新行并隐藏了他们立即点击的行。谁知道我做错了什么？

提前致谢！

4 个答案:

答案 0 :(得分：6)

问题来自点击事件，要将事件附加到新元素.add-row（动态添加），您必须使用事件委派 on() ：

$('body').on('click', '.add-row', function(e) {

希望这有帮助。

＆＃13;
＆＃13; 
$(function() {
  $('table').on('click', '.hide-row', function(e) {
    console.log('hidden!');
    $( this ).parent().parent().hide();
  });


  $('body').on('click', '.add-row', function(e) {
    $( this ).html('Hide').removeClass('add-row').addClass('hide-row');
    $( this ).parent().parent().next().show();
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="1" cellspacing="0">
  <tbody>
    <tr>
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_1" id="event_type_1" tabindex="24" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_1" type="text" id="event_names_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="24">
      </td>
      <td class="padding-right-5">
        <input name="school_1" type="text" id="school_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="25" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_1" type="tel" id="event_time_score_1" class="form-control responsive-placeholder text-center" tabindex="26" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_2" id="event_type_2" tabindex="27" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_2" type="text" id="event_names_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="27">
      </td>
      <td class="padding-right-5">
        <input name="school_2" type="text" id="school_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="28" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_2" type="tel" id="event_time_score_2" class="form-control responsive-placeholder text-center" tabindex="29" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_3" id="event_type_3" tabindex="30" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_3" type="text" id="event_names_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="30">
      </td>
      <td class="padding-right-5">
        <input name="school_3" type="text" id="school_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="31" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_3" type="tel" id="event_time_score_3" class="form-control responsive-placeholder text-center" tabindex="32" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_4" id="event_type_4" tabindex="33" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_4" type="text" id="event_names_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="33">
      </td>
      <td class="padding-right-5">
        <input name="school_4" type="text" id="school_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="34" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_4" type="tel" id="event_time_score_4" class="form-control responsive-placeholder text-center" tabindex="35" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_5" id="event_type_5" tabindex="36" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_5" type="text" id="event_names_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="36">
      </td>
      <td class="padding-right-5">
        <input name="school_5" type="text" id="school_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="37" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_5" type="tel" id="event_time_score_5" class="form-control responsive-placeholder text-center" tabindex="38" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
    <tr style="display: none;">
      <td class="padding-right-5">
        <span class="plain-select">
          <select name="event_type_6" id="event_type_6" tabindex="39" class="form-control" style="padding: 7px 12px;">
            <option value="option_1">Option 1</option>
          </select>
        </span>
      </td>
      <td class="padding-right-5">
        <input name="event_names_6" type="text" id="event_names_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="39">
      </td>
      <td class="padding-right-5">
        <input name="school_6" type="text" id="school_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="40" value="">
      </td>
      <td class="padding-right-5">
        <input name="event_time_score_6" type="tel" id="event_time_score_6" class="form-control responsive-placeholder text-center" tabindex="41" size="10" maxlength="10">
      </td>
      <td class="padding-right-5">
        <div class="btn btn-xs btn-primary add-row">
          Add row
        </div>
      </td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

如果你想制作动态表行，那么你将如何实现它。 好的做法：在表中添加ID并删除display：none rows。此jquery将添加动态行并切换添加/删除按钮

$(function() {
    $('#mytable').on('click', '.add-row', function(e) {
        $('#mytable').append('<tr>' + $('#mytable tr:last-child').html()+'</tr>');
    $(this).removeClass('add-row').addClass('remove-row').html('Remove Row');
    });

  $('#mytable').on('click', '.remove-row', function(e) {
    $(this).parent().parent().remove();
    });
});

答案 2 :(得分：0)

$(function() {
  $('.add-row').click(function() {
    var $hideBtn = $( this ).html('Hide').removeClass('add-row').addClass('hide-row');
    $hideBtn.click(function() {
        $(this).parent().parent().hide();
    })
    $( this ).parent().parent().next().show();
  });
});

答案 3 :(得分：-1)

尝试使用.attr（'class'，'hide-row'），这样你就可以一次性覆盖class属性。

相关问题
最新问题