我嵌套了<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>
例如,我第一次将列表项“用户”编辑为“用户”,单击“保存”后,项目文本更改得很好。但是在第二次我编辑另一个项目时,让我们说“提现”到“提现”,单击“保存”后,我编辑的项目更改为“提现”,但我之前编辑的列表项“用户”也更改为“提现”也是如此。
我不知道我的 JavaScript 有什么问题。我该如何纠正?谢谢
每次单击 .fa-pencil 时,您都会使用局部变量(如 li_element)将事件侦听器添加到 .saveChange 和 #active,这些变量的范围限定为回调函数。这意味着第二次编辑项目时,会执行两个回调,但第一个回调仍然使用 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');
}
})
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句