localStorage からアイテムを削除しようとしています。ユーザーが削除ボタンをクリックすると、localStorage に何が含まれているかを調べ、削除された行に基づいて値を削除する必要があります。
たとえば、localStorage に次のカンマ区切りのリストが含まれているとします。
contact,user,account
削除された行がそのaccount行だった場合は、リストからアカウントの値を削除して、localStorage に次のものが含まれるようにする必要があります。
contact,user
または、削除されたuser行が行だった場合、ユーザーの値をリストから削除して、localStorage に次のものが含まれるようにする必要があります。
contact,account
これが私のjqueryコードです：
<script type="text/javascript">
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var dataRows = j$('tr.dataRow');
localStorage.activeButtons = '';
var active = localStorage.activeButtons.split(',');
dataRows.each(function(index, elem) {
updateImages(elem, active[index]);
});
j$("img[id$=':deleteImage']").on("click", function(event) {
updateImages(j$(this).closest('tr'));
});
j$('[id$=btnContact]').on('click', function() {
localStorage.activeButtons += 'contact,';
});
j$('[id$=btnUser]').on('click', function() {
localStorage.activeButtons += 'user,';
});
j$('[id$=btnAccount]').on('click', function() {
localStorage.activeButtons += 'account,';
});
A4J.AJAX.AddListener({
onafterajax: function(req,evt,data) {
console.log('************* activeButtons = ' + localStorage.activeButtons);
j$('[id$=deleteImage]').on('click', function(elem) {
console.log('the delete button was clicked');
console.log(elem);
console.log('************** before ' + localStorage.activeButtons);
localStorage.activeButtons = localStorage.activeButtons;
console.log('************** after ' + localStorage.activeButtons);
});
console.log('************* activeButtons = ' + localStorage.activeButtons);
var lastRow = j$('table[id$=participantTable] tbody tr:last');
var active = localStorage.activeButtons.split(',');
var dataRows = j$('tr.dataRow');
dataRows.each(function(index, elem) {
updateImages(elem, active[index]);
});
}
});
});
function updateImages(myRow, myActive) {
var rowInputs = j$(myRow).find('input[type="text"]');
var contactId = (j$(rowInputs[0]).attr('id'));
var userId = (j$(rowInputs[1]).attr('id'));
var accountId = (j$(rowInputs[2]).attr('id'));
var contact = (j$(rowInputs[0]).val());
var user = (j$(rowInputs[1]).val());
var account = (j$(rowInputs[2]).val());
if(contactId.indexOf("participant") != -1 || userId.indexOf("participant") != -1 || accountId.indexOf("participant") != -1) {
switch (myActive) {
case "contact":
// hide the other two
j$(rowInputs[1]).hide();
j$(rowInputs[2]).hide();
j$(rowInputs[1].parentNode).find('img').hide();
j$(rowInputs[2].parentNode).find('img').hide();
break;
case "user":
// hide the other two
j$(rowInputs[0]).hide();
j$(rowInputs[2]).hide();
j$(rowInputs[0].parentNode).find('img').hide();
j$(rowInputs[2].parentNode).find('img').hide();
break;
case "account":
// hide the other two
j$(rowInputs[0]).hide();
j$(rowInputs[1]).hide();
j$(rowInputs[0].parentNode).find('img').hide();
j$(rowInputs[1].parentNode).find('img').hide();
break;
}
if (contact !== '') {
j$(rowInputs[1]).hide();
j$(rowInputs[2]).hide();
j$(rowInputs[0].parentNode).find('img').show();
j$(rowInputs[1].parentNode).find('img').hide();
j$(rowInputs[2].parentNode).find('img').hide();
}
else if (user !== '') {
j$(rowInputs[0]).hide();
j$(rowInputs[2]).hide();
j$(rowInputs[0].parentNode).find('img').hide();
j$(rowInputs[1].parentNode).find('img').show();
j$(rowInputs[2].parentNode).find('img').hide();
}
else if (account !== '') {
j$(rowInputs[0]).hide();
j$(rowInputs[1]).hide();
j$(rowInputs[0].parentNode).find('img').hide();
j$(rowInputs[1].parentNode).find('img').hide();
j$(rowInputs[2].parentNode).find('img').show();
}
if (account !== '' && contact !== '') {
j$(rowInputs[1]).hide();
j$(rowInputs[2]).show();
j$(rowInputs[0].parentNode).find('img').show();
j$(rowInputs[1].parentNode).find('img').hide();
j$(rowInputs[2].parentNode).find('img').hide();
}
}
}
</script>
localStorage から値を削除しようとしているコードの関連部分を次に示します。
A4J.AJAX.AddListener({
onafterajax: function(req,evt,data) {
console.log('************* activeButtons = ' + localStorage.activeButtons);
j$('[id$=deleteImage]').on('click', function(elem) {
console.log('the delete button was clicked');
console.log(elem);
console.log('************** before ' + localStorage.activeButtons);
//here is where I need to remove the value from the localStorage
//I am passing in the elem as the function argument to determine
//what row is being deleted and what value I should remove from the
//local storage.
console.log('************** after ' + localStorage.activeButtons);
});
console.log('************* activeButtons = ' + localStorage.activeButtons);
var lastRow = j$('table[id$=participantTable] tbody tr:last');
var active = localStorage.activeButtons.split(',');
var dataRows = j$('tr.dataRow');
dataRows.each(function(index, elem) {
updateImages(elem, active[index]);
});
}
});
どんな助けでも大歓迎です。ありがとう。