#javascript #jquery #html #css #jquery-ui
#javascript #jquery #HTML #css #jquery-пользовательский интерфейс
Вопрос:
Я на полпути к обновлению моего веб-сайта и столкнулся с проблемой, которую, похоже, не могу разгадать. Если вы нажмете зеленую кнопку с надписью «Лаборатория алхимии», откроется лаборатория алхимии. После этого, если вы перетащите лабораторную работу один раз и щелкните красную и зеленую стрелки в лабораторной работе, счетчик работает так, как и должен, с максимальным значением 10. Если перетащить лабораторную работу еще 2 раза, а затем щелкнуть зеленую или красную стрелку, количество уменьшится на 3. Таким образом, каждый раз, когда вы удаляете лабораторию, она добавляет еще один щелчок по щелчку. Есть идеи о том, почему или как это исправить? Заранее благодарю.
javascript:
function handleNewClicks() {
$(".pro_cell_3").click(function () {
var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10);
var maxUp = 10;
if (currentUp == maxUp) {
$(this).parent().find('.pro_cell_2').text("1");
} else {
$(this).parent().find('.pro_cell_2').text(currentUp 1);
}
});
$(".pro_cell_4").click(function () {
var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10);
var maxUp = 10;
if ((currentUp - 1) == 0) {
$(this).parent().find('.pro_cell_2').text(maxUp);
} else {
$(this).parent().find('.pro_cell_2').text(currentUp - 1);
}
});
$(".up_cell_3").click(function () {
var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10);
var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10);
var className = $(this).parent().parent().attr("class");
className = className.replace("ui-draggable ", "");
if (currentUp == maxUp) {
$(this).parent().find('.up_cell_2').text("1");
$(this).parent().parent().css({ 'background-image': 'url(images/' className '_1.png)' });
} else {
$(this).parent().find('.up_cell_2').text(currentUp 1);
$(this).parent().parent().css({ 'background-image': 'url(images/' className '_' (currentUp 1) '.png)' });
}
});
$(".up_cell_4").click(function () {
var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10);
var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10);
var className = $(this).parent().parent().attr("class");
className = className.replace("ui-draggable ", "");
if ((currentUp - 1) == 0) {
$(this).parent().find('.up_cell_2').text(maxUp);
$(this).parent().parent().css({ 'background-image': 'url(images/' className '_' maxUp '.png)' });
} else {
$(this).parent().find('.up_cell_2').text(currentUp - 1);
$(this).parent().parent().css({ 'background-image': 'url(images/' className '_' (currentUp - 1) '.png)' });
}
});
}
function proCoding() {
proWrap = document.createElement('div');
$(proWrap).attr('class', 'pro_wrap');
proCell1 = document.createElement('span');
$(proCell1).attr('class', 'pro_cell_1');
proCell2 = document.createElement('span');
$(proCell2).attr('class', 'pro_cell_2');
proCell3 = document.createElement('span');
$(proCell3).attr('class', 'pro_cell_3');
proCell4 = document.createElement('span');
$(proCell4).attr('class', 'pro_cell_4');
proCell2.innerText = "1";
proWrap.appendChild(proCell1);
proWrap.appendChild(proCell2);
proWrap.appendChild(proCell3);
proWrap.appendChild(proCell4);
}
function upCoding() {
pos_top = $(window).scrollTop() top_off_set;
pos_left = $(window).scrollLeft() left_off_set;
upWrap = document.createElement('div');
$(upWrap).attr('class', 'up_wrap');
upCell1 = document.createElement('span');
$(upCell1).attr('class', 'up_cell_1');
upCell2 = document.createElement('span');
$(upCell2).attr('class', 'up_cell_2');
$(upCell2).attr('max', '10');
upCell3 = document.createElement('span');
$(upCell3).attr('class', 'up_cell_3');
upCell4 = document.createElement('span');
$(upCell4).attr('class', 'up_cell_4');
upCell2.innerText = "1";
upWrap.appendChild(upCell1);
upWrap.appendChild(upCell2);
upWrap.appendChild(upCell3);
upWrap.appendChild(upCell4);
newLab = document.createElement('div');
}
$(".nav_alchemy_lab").click(function () {
proCoding();
upCoding();
newLab.appendChild(proWrap);
newLab.appendChild(upWrap);
$(newLab).attr('class', 'ui-draggable alchemy_lab').appendTo('#cardPile').css({ 'top': pos_top, 'left': pos_left, 'background-image': 'url(images/alchemy_lab_1.png)' }).draggable({
containment: '#content', snap: true, stack: '#cardPile div', cursor: 'move',
start: function (e) {
},
stop: function (e) {
setTimeout(function () {
handleNewClicks()
}, 1);
}
})
});
$(".ui-draggable").draggable({
containment: '#content',
stack: '#cardPile div',
cursor: 'move'
});
$(".ui-droppable").droppable({
accept: '#cardPile div',
drop: handleCardDrop
});
function handleCardDrop(event, ui) {
$(ui.draggable).css('top', $(this).position().top);
var divWidth = ui.draggable.width();
var divLeft = $(this).position().left;
if (divWidth == 100) {
divLeft -= 0;
} else if (divWidth == 200) {
divLeft -= 100;
} else if (divWidth == 300) {
divLeft -= 100;
} else {
divLeft -= 0;
}
$(ui.draggable).css('left', divLeft);
}
Комментарии:
1. Я надеюсь, вы не ожидаете, что люди будут просматривать исходные тексты вашего сайта. Пожалуйста, опубликуйте соответствующий код.
2. Я рекомендую вам попробовать опубликовать то, что, по вашему мнению, является релевантным кодом, вызывающим ошибку, и, желательно, что вы пытались сделать для ее устранения. Это не сайт, где вы выполняете работу бесплатно, речь идет о сотрудничестве.
3. Я добавил соответствующий javascript, но половина html создается на основе того, что вы нажимаете, а другая половина представляет собой массивную сетку 7×8, так что да, вам понадобится плагин вроде figbug. Я не пытаюсь заставить кого-либо заглянуть на мой веб-сайт… у веб-сайта есть определенная аудитория, в которой, я сильно сомневаюсь, кто-либо здесь вообще заинтересуется, я просто хочу исправить свой код.
4. также, если вы посмотрите на код, вы увидите, что я сам немного поработал над проектом, поэтому мне не нужно, чтобы кто-то делал мою работу за меня, просто ищу несколько указателей.
5. Я только что добавил точку останова в коде, используя веб-инспектор в Chrome. Если вы попробуете это (у Firebug тоже должны быть точки останова), вы увидите, что функция, увеличивающая счетчик, на самом деле выполняется несколько раз. Если вы найдете причину этого, вы устраните проблему.
Ответ №1:
Каждый раз, когда вы заканчиваете перетаскивание чего-либо, вы запускаете функцию handleNewClicks() .
$(newLab).attr('class', 'ui-draggable alchemy_lab').appendTo('#cardPile').css({ 'top': pos_top, 'left': pos_left, 'background-image': 'url(images/alchemy_lab_1.png)' }).draggable({
containment: '#content', snap: true, stack: '#cardPile div', cursor: 'move',
start: function (e) {
},
stop: function (e) {
setTimeout(function () {
handleNewClicks()
}, 1);
}
})
Кроме того, эта функция привязывает события к ячейкам. Когда вы привязываете события к ячейкам несколько раз, они вызываются более одного раза. Вам нужно выполнить только handleNewClicks() один раз при инициализации лаборатории алхимии.
function handleNewClicks() {
$(".pro_cell_3").click(function () {
var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10);
var maxUp = 10;
if (currentUp == maxUp) {
$(this).parent().find('.pro_cell_2').text("1");
} else {
$(this).parent().find('.pro_cell_2').text(currentUp 1);
}
});
$(".pro_cell_4").click(function () {
var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10);
var maxUp = 10;
if ((currentUp - 1) == 0) {
$(this).parent().find('.pro_cell_2').text(maxUp);
} else {
$(this).parent().find('.pro_cell_2').text(currentUp - 1);
}
});
$(".up_cell_3").click(function () {
var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10);
var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10);
var className = $(this).parent().parent().attr("class");
className = className.replace("ui-draggable ", "");
if (currentUp == maxUp) {
$(this).parent().find('.up_cell_2').text("1");
$(this).parent().parent().css({ 'background-image': 'url(images/' className '_1.png)' });
} else {
$(this).parent().find('.up_cell_2').text(currentUp 1);
$(this).parent().parent().css({ 'background-image': 'url(images/' className '_' (currentUp 1) '.png)' });
}
});
$(".up_cell_4").click(function () {
var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10);
var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10);
var className = $(this).parent().parent().attr("class");
className = className.replace("ui-draggable ", "");
if ((currentUp - 1) == 0) {
$(this).parent().find('.up_cell_2').text(maxUp);
$(this).parent().parent().css({ 'background-image': 'url(images/' className '_' maxUp '.png)' });
} else {
$(this).parent().find('.up_cell_2').text(currentUp - 1);
$(this).parent().parent().css({ 'background-image': 'url(images/' className '_' (currentUp - 1) '.png)' });
}
});
}
В принципе, чтобы исправить это, вы могли бы изменить следующую функцию на то, что у меня есть ниже:
$(".nav_alchemy_lab").click(function () {
proCoding();
upCoding();
newLab.appendChild(proWrap);
newLab.appendChild(upWrap);
$(newLab).attr('class', 'ui-draggable alchemy_lab').appendTo('#cardPile').css({ 'top': pos_top, 'left': pos_left, 'background-image': 'url(images/alchemy_lab_1.png)' }).draggable({
containment: '#content', snap: true, stack: '#cardPile div', cursor: 'move'
});
handleNewClicks()
});
Это все непроверено.
Комментарии:
1. Вау … да, это оно. Это создает проблему, когда у вас несколько лабораторий, но я немного поработаю с этим и посмотрю, что я могу придумать. Спасибо!
2. Если это связано с тем, что события не привязаны к новым лабораториям, попробуйте использовать функцию jQuery Live: api.jquery.com/live
3. это то, о чем я думал, но… Я не знал, что .live () существует, все еще учусь здесь. Большое вам спасибо, вы ответили на мой вопрос и на мой вопрос в моем вопросе! lol, еще раз спасибо.