代码之家 › 专栏 › 技术社区 › Houy Narun

列表项<li>的文本在编辑后没有正确反映,在javascript的模式弹出窗口中单击保存按钮。

materialize javascript

Houy Narun · 技术社区 · 6 年前

我已嵌套的列表项 <li> 结构如下。我要做的是从弹出模式中编辑每个项目文本,并在单击按钮后反映更改。 Save .

但是,我编辑的第一个列表项工作得很好,但是从第二次开始,它就不能按预期工作。

$(document).ready(function() {

  $('.modal').modal(); // modal

  var child;
  $('body').on('click', '.fa-pencil', function(e) {


    var text = $(this).closest("li").clone() //clone the element
      .children() //select all the children
      .remove() //remove all the children
      .end() //again go back to selected element
      .text();

    child = $(this).closest("li").children();
    var li_element = $(this).closest('li');
    console.log(li_element);
    var dataActive = $(this).closest('li').attr('data-act');
    var li_icon = li_element.attr('data-icon');

    var modal1 = $('#modal1');
    var modalBody = modal1.find('.modal-content');

    modalBody.find('h4.itemdes').text('');
    modalBody.find('.modalBody').html('');

    var modalHeader = modalBody.find('h4.itemdes').attr('contenteditable', true).text(text);
    dataActive = $(this).closest('li').attr('data-act') == 'Y' ? 'checked="checked"' : '';
    ActiveOpt = '<p><label><input type="checkbox" id="active" class="filled-in" ' + dataActive + ' /><span>Active</span></label></p>';
    IconOpt = '<p><a href="#" class="btn" data-toggle="popover" id="changeIcon"><i class="' + li_icon + '" id="icon_element" aria-hidden="true"></i></a></p>';

    var datahtml = ActiveOpt + IconOpt;
    modalBody.find('.modalBody').html(datahtml);
    // modalBody.find('.modalBody').append(IconOpt);

    $('body').on('click', '.saveChange', function() {
      var textarea = $('.itemdes').text();
      var appendItem = textarea;
      li_element.text('').empty().append(appendItem).append(child);
      // $(this).closest("li").text('').empty().append(appendItem).append(child);
      ActiveOpt = '';
      IconOpt = '';
      // li_element = '';
    });

    // Function to check li data-Acive
    $('body').on('change', '#active', function() {
      li_element.removeAttr('data-act');
      // console.log(li_element.prop('checked'));
      if ($(this).prop('checked')) {
        li_element.attr('data-act', 'Y');
        // li_element.attr('checked','checked');
      } else {
        li_element.attr('data-act', 'N');
        // li_element.removeAttr('checked');
      }



    })

  });
})

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Materialized CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Modal Trigger -->
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4 style="width: auto; float: left;"><i class="fa fa-pencil-square-o" aria-hidden="true">&nbsp;</i></h4>
    <h4 class="itemdes">Modal Header</h4>
    <div class="modalBody">
      <p>A bunch of text</p>
    </div>
    <a href="#!" class="modal-close waves-effect waves-green btn saveChange right">Save</a>
  </div>
</div>

<ol class="example example2">
  <li data-formdesc="User" data-act="Y" data-icon="fa fa-heart">
    <i class="fa fa-heart"></i>User<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
    <ol></ol>
  </li>
  <li data-formdesc="Cash Withdrawal" data-act="Y" data-icon="">
    <i class=""></i>Cash Withdrawal<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
    <ol></ol>
  </li>
  <li data-formdesc="Branch1" data-act="Y" data-icon="fa fa-futbol-o">
    <i class="fa fa-futbol-o"></i>Branch1<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
    <ol>
      <li data-formdesc="Customer Centre" data-act="Y" data-icon="">
        <i class=""></i>Customer Centre<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
        <ol></ol>
      </li>
      <li data-formdesc="Customers Detail Listing" data-act="Y" data-icon="">
        <i class=""></i>Customers Detail Listing<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
        <ol></ol>
      </li>
    </ol>
  </li>
  <li data-formdesc="2 two" data-act="Y" data-icon="fa fa-linkedin">
    <i class="fa fa-linkedin"></i>2 two<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
    <ol>
      <li data-formdesc="Cash Withdrawal" data-act="Y" data-icon="">
        <i class=""></i>Cash Withdrawal<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
        <ol></ol>
      </li>
      <li data-formdesc="Till to Till Transfer" data-act="Y" data-icon="">
        <i class=""></i>Till to Till Transfer<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
        <ol>
          <li data-formdesc="Disbursement Voucher" data-act="Y" data-icon="">
            <i class=""></i>Disbursement Voucher<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
            <ol></ol>
          </li>
        </ol>
      </li>
      <li data-formdesc="Income Posting" data-act="Y" data-icon="">
        <i class=""></i>Income Posting<a href="JavaScript:void(0)" style="visibility: visible;"><i class="fa fa-pencil modal-trigger" aria-hidden="true" data-target="modal1"></i></a>
        <ol></ol>
      </li>
    </ol>
  </li>
</ol>

例如,当我第一次将列表项“user”编辑为“users”时,单击“保存”后,该项的文本变化很好。但是在第二次编辑另一个项目时,我们把“现金提取”改为“现金提取”,单击“保存”后,我编辑的项目改为“现金提取”,但列出我以前编辑的项目“用户”,也改为“现金提取”。

我不知道我的javascript有什么不正确。我该怎么纠正?谢谢

1 回复 | 直到 6 年前

davideSerafini 6 年前

每次单击.fa铅笔时,您都会再次向.savechange和active添加事件侦听器,使用本地变量(如li_元素),这些变量的作用域是回调函数。这意味着,第二次编辑项目时,将执行两个回调,但第一个回调仍然使用li_元素的前一个值,从而也将新值设置为前一个编辑的元素。

您应该声明所有事件侦听器一次,并将所有需要的变量移动到与 var child .

这应该管用

$(document).ready(function() {

  $('.modal').modal(); // modal

  var child;
  var li_element;
  $('body').on('click', '.fa-pencil', function(e) {


    var text = $(this).closest("li").clone() //clone the element
      .children() //select all the children
      .remove() //remove all the children
      .end() //again go back to selected element
      .text();

    child = $(this).closest("li").children();
    li_element = $(this).closest('li');
    console.log(li_element);
    var dataActive = $(this).closest('li').attr('data-act');
    var li_icon = li_element.attr('data-icon');

    var modal1 = $('#modal1');
    var modalBody = modal1.find('.modal-content');

    modalBody.find('h4.itemdes').text('');
    modalBody.find('.modalBody').html('');

    var modalHeader = modalBody.find('h4.itemdes').attr('contenteditable', true).text(text);
    dataActive = $(this).closest('li').attr('data-act') == 'Y' ? 'checked="checked"' : '';
    ActiveOpt = '<p><label><input type="checkbox" id="active" class="filled-in" ' + dataActive + ' /><span>Active</span></label></p>';
    IconOpt = '<p><a href="#" class="btn" data-toggle="popover" id="changeIcon"><i class="' + li_icon + '" id="icon_element" aria-hidden="true"></i></a></p>';

    var datahtml = ActiveOpt + IconOpt;
    modalBody.find('.modalBody').html(datahtml);
    // modalBody.find('.modalBody').append(IconOpt);
  });

  $('body').on('click', '.saveChange', function() {
      var textarea = $('.itemdes').text();
      var appendItem = textarea;
      li_element.text('').empty().append(appendItem).append(child);
      // $(this).closest("li").text('').empty().append(appendItem).append(child);
      ActiveOpt = '';
      IconOpt = '';
      // li_element = '';
    });

    // Function to check li data-Acive
    $('body').on('change', '#active', function() {
      li_element.removeAttr('data-act');
      // console.log(li_element.prop('checked'));
      if ($(this).prop('checked')) {
        li_element.attr('data-act', 'Y');
        // li_element.attr('checked','checked');
      } else {
        li_element.attr('data-act', 'N');
        // li_element.removeAttr('checked');
      }

  })
})