列表项 <li> 的文本在 Javascript 中编辑点击模态弹出窗口中的保存按钮后未正确反映
Text of List item <li> does not reflected correctly after edited click save button from modal pop up in Javascript
我有 <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"> </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'，单击保存后，项目文本发生了很好的变化。但是第二次我编辑另一个项目，假设'Cash Withdrawal'到'Cash Withdrawaling'，点击保存后，我编辑的项目变成了'Cash Withdrawaling'，但是我编辑的列表项目'Users'以前，也更改为 'Cash Withdrawaling'。
我不知道我的 JavaScript 有什么问题。我该如何纠正？谢谢
每次点击 .fa-pencil 时，您都会再次向 .saveChange 和 #active 添加事件侦听器，使用局部变量，如 li_element，其作用域为回调函数。这意味着您第二次编辑一个项目时，会执行两个回调，但第一次仍然使用 li_element 的先前值，因此也将新值设置为先前编辑的元素。
您应该一次声明所有事件侦听器，并将所有需要的变量移动到与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');
}
})
})
我有 <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"> </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'，单击保存后，项目文本发生了很好的变化。但是第二次我编辑另一个项目，假设'Cash Withdrawal'到'Cash Withdrawaling'，点击保存后，我编辑的项目变成了'Cash Withdrawaling'，但是我编辑的列表项目'Users'以前，也更改为 'Cash Withdrawaling'。
我不知道我的 JavaScript 有什么问题。我该如何纠正？谢谢
每次点击 .fa-pencil 时，您都会再次向 .saveChange 和 #active 添加事件侦听器，使用局部变量，如 li_element，其作用域为回调函数。这意味着您第二次编辑一个项目时，会执行两个回调，但第一次仍然使用 li_element 的先前值，因此也将新值设置为先前编辑的元素。
您应该一次声明所有事件侦听器，并将所有需要的变量移动到与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');
}
})
})