我为我的项目编写了一个脚本，允许用户使用JS，PHP和MySql管理库存。用户可以选择库存位置并通过单击按钮来更新产品的计数。此过程使用AJAX调用以实时更新前端和后端。
我的代码工作正常，但由于代码冗余量的原因，我对执行不满意。我有两个添加和删除AJAX功能，以更新显示到网站的第一个库存位置。但是为了让用户在选择新位置后继续执行此操作，我必须重用嵌套在选择位置Ajax代码中的这两个函数的代码。我的JS技能不是那么强大，我想知道JQuery是否允许更好的代码凝聚力。在PHP中，我将创建一个类和函数来执行此任务以避免代码重用。我可以在JQuery中实现类似的东西吗？
// This script is used update and display changes to inventory displayed on cp.php
$(document).ready(function() {
var this_item;
var itemid;
var count;
// Store the first table from the MySQL Database and display it to the page
var location = $('.location_select').attr('title');
$('.default_location').empty();
$('.default_location').append(location);
// Add to the inventory count of the selected product
$('.glyphicon-plus').click(function() {
event.preventDefault();
// Store the selected product name and update its display count on the page
this_item = $(this).attr('title');
itemid = this_item.substr(0, this_item.length - 1);
count = parseInt($('#'+itemid).text());
count++;
// Send the inventory count to modifyproduct.php and update new count to MySQL
$.ajax ({
url: 'modifyproduct.php',
type: 'GET',
data: {
location: location,
itemid: itemid,
count: count,
},
success: function(serverResponse) {
$('#'+itemid).hide();
$('#'+itemid).html(count).delay(170);
$('#'+itemid).fadeIn();
}
});
});
// Remove from the select inventory count
$('.glyphicon-minus').click(function() {
event.preventDefault();
// Store the selected product name and update its display count on the page
this_item = $(this).attr('title');
itemid = this_item.substr(0, this_item.length - 1);
count = parseInt($('#'+itemid).text());
count--;
// Send the inventory count to modifyproduct.php and update new count to MySQL
$.ajax ({
url: 'modifyproduct.php',
type: 'GET',
data: {
location: location,
itemid: itemid,
count: count,
},
success: function(serverResponse) {
$('#'+itemid).hide();
$('#'+itemid).html(count).delay(170);
$('#'+itemid).fadeIn();
}
});
});
// Select inventory location to be displayed from .location_select menu
$('.location_select').click(function(){
location = $(this).attr('title');
$('.default_location').empty();
$('.default_location').append(location);
$.ajax ({
url: 'display.php',
type: 'GET',
data: {
location: location,
},
success: function(serverResponse) {
$('#display_inventory').fadeOut('slow');
$('#display_inventory').empty();
$('#display_inventory').hide();
$('#display_inventory').append(serverResponse);
$('#display_inventory').fadeIn('slow');
$('.glyphicon-plus').click(function() {
event.preventDefault();
this_item = $(this).attr('title');
itemid = this_item.substr(0, this_item.length - 1);
count = parseInt($('#'+itemid).text());
count++;
$.ajax ({
url: 'modifyproduct.php',
type: 'GET',
data: {
location: location,
itemid: itemid,
count: count,
},
success: function(serverResponse) {
$('#'+itemid).hide();
$('#'+itemid).html(count).delay(170);
$('#'+itemid).fadeIn();
}
});
});
$('.glyphicon-minus').click(function() {
event.preventDefault();
this_item = $(this).attr('title');
itemid = this_item.substr(0, this_item.length - 1);
count = parseInt($('#'+itemid).text());
count--;
$.ajax ({
url: 'modifyproduct.php',
type: 'GET',
data: {
location: location,
itemid: itemid,
count: count,
},
success: function(serverResponse) {
$('#'+itemid).hide();
$('#'+itemid).html(count).delay(170);
$('#'+itemid).fadeIn();
}
});
});
}
})
});
});
答案 0 :(得分：1)
JS中的函数是first class citizens
var fn = function() { ... }
在您的代码中，我看到唯一改变的是count
我执行以下操作
var modifyItem = function(quantity) {
return function() {
event.preventDefault();
this_item = $(this).attr('title');
itemid = this_item.substr(0, this_item.length - 1);
count = parseInt($('#' + itemid).text());
// note that quantity is added here
count += quantity
$.ajax({
url: 'modifyproduct.php',
type: 'GET',
data: {
location: location,
itemid: itemid,
count: count,
},
success: function(serverResponse) {
$('#' + itemid).hide();
$('#' + itemid).html(count).delay(170);
$('#' + itemid).fadeIn();
}
});
}
}
然后使用返回值（函数）作为要完成的操作
$('.glyphicon-plus').click(modifyItem(+1))
$('.glyphicon-minus').click(modifyItem(-1))
答案 1 :(得分：1)
您不必将事件处理程序的第二份副本放在＆＃39; .glyphicon-plus＆＃39;和＆＃39; .glyphicon-minus＆＃39 ;;你只需要改变你如何连接处理程序。
使用＆＃34; on＆＃34;而不是＆＃34;单击＆＃34;，并绑定到始终存在的父元素，例如表格，div，无论你的页面部分是什么。
＆＃34;在＆＃34;采用选择器：http://api.jquery.com/on/
$(".product-table").on("click", ".glyphicon-plus", function() {
//your function body
});
这有一个额外的好处，即事件处理程序可以在任何时候通过DOM创建的任何.glyphicon-plus处于活动状态。对于进行大量客户端更新的页面非常方便。