Question

我点击保存按钮后现在遇到问题，因为我仍然可以在点击时更改表格的样式。我应该添加什么来防止在单击保存按钮后发生这种情况。提前谢谢。

<div class="kalbox">
   <span class="editing">edit</span>
   <span class="saving">save</span>
   <div class="kaltext">

    <h1>January</h1>

    <table>
      <thead>
        <tr>
          <th>Sun</th>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
        </tr>
      </thead>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><div class="day">1</div></td>
        <td><div class="day">2</div></td>            
      </tr>
      <tr>
        <td><div class="day">3</div></td>
        <td><div class="day">4</div></td>
        <td><div class="day">5</div></td>
        <td><div class="day">6</div></td>
        <td><div class="day">7</div></td>
        <td><div class="day">8</div></td>
        <td><div class="day">9</div></td>            
      </tr>
      <tr>
        <td><div class="day">10</div></td>
        <td><div class="day">11</div></td>
        <td><div class="day">12</div></td>
        <td><div class="day">13</div></td>
        <td><div class="day">14</div></td>
        <td><div class="day">15</div></td>
        <td><div class="day">16</div></td>           
      </tr>
      <tr>
        <td><div class="day">17</div></td>
        <td><div class="day">18</div></td>
        <td><div class="day">19</div></td>
        <td><div class="day">20</div></td>
        <td><div class="day">21</div></td>
        <td><div class="day">22</div></td>
        <td><div class="day">23</div></td>            
      </tr>
      <tr>
        <td><div class="day">24</div></td>
        <td><div class="day">25</div></td>
        <td><div class="day">26</div></td>
        <td><div class="day">27</div></td>
        <td><div class="day">28</div></td>
        <td><div class="day">29</div></td>
        <td><div class="day">30</div></td>           
      </tr>
      <tr>
        <td><div class="day">31</div></td>
      </tr>
    </table>
</div>
</div>

$(document).ready(function() {
    $('.editing').click(function(){
        $(this).hide();
        $('.kalbox').addClass('editable'); 
        $('.kaltext').attr('contenteditable', 'true'); 
        $('table tr td').click(function(){
            $(this).css('background-color', '#fff');
            $(this).css('color','#444');
        });
        $('.saving').show(); 
    });


    $('.saving').click(function(){
        $(this).hide(); 
        $('.kalbox').removeClass('editable');
        $('.kaltext').removeAttr('contenteditable');
        $('.editing').show();
    }); 
});

Answer 1

您可以使用flag variable并在编辑时进行检查。

$(document).ready(function() {
    var checkSave = true;
    $('.editing').click(function(){
            if(checkSave){
          $(this).hide();
          $('.kalbox').addClass('editable'); 
          $('.kaltext').attr('contenteditable', 'true'); 
          $('table tr td').click(function(){
                if(checkSave){
                    $(this).css('background-color', '#fff');
                    $(this).css('color','#444');
              }
          });
          $('.saving').show(); 
        }
    });


    $('.saving').click(function(){
        $(this).hide(); 
        $('.kalbox').removeClass('editable');
        $('.kaltext').removeAttr('contenteditable');
        $('.editing').show();
        checkSave = false;
    }); 
});

https://jsfiddle.net/hLx7zxdb/3/

单击“保存”按钮后阻止css操作发生

1 个答案: