У меня есть похожая функция на моем сайте. Обновление нового номера занимает от 1 до 3 секунд (из-за неизбежных запросов sql для моего сайта - не самый лучший, но он работает).
Например, если кому-то это нравится, они щелкают пальцами вверх. Затем div обновляется с новым номером.
Если у него есть 3 лайка, то когда вам нравится, у него будет 4 лайка. Если вы нажмете еще раз, у него снова будет 3 лайка. Повторяй вечно.
Единственная цель javascript - дать мгновенное удовлетворение пользователям, которые, если не обращать внимания, могут быть не уверены, сработало ли это, особенно в те моменты, когда это занимает более 1 секунды.
Моя идея заключается в том, что если я смогу просто сделать это с помощью jquery, чтобы временно отобразить новый номер, пока мой сайт не переписывает div, чтобы показать обновленный номер, он будет хорошо выполнять эту функцию для того, что мне нужно.
Вот моя идея. Пожалуйста, помогите мне заставить его работать.
var likenum = $(".likenum").val(); // get the number inside the div
var newLikeNum = parseInt(likenum) + 1; // make sure the text is an integer for math functions, then do math and assign to a var
$(".likenum").val(newLikeNum); // refresh div with the new number
Есть пара проблем.
- как мне запустить ОДИН РАЗ и если щелкнуть снова, вместо этого МИНУС?
(кроме того, некоторые другие проблемы:
Ему нужно сохранить оригинальный ликенум для всех будущих функций, а не получать новый. Таким образом, если мой сайт обновляет div, jquery не обращает на это внимания. Он знал исходное число, и теперь он равен +1 или -1 к исходному номеру.
Итак, давайте возьмем этот пример для того, что я хочу.
<div class="likediv">3</div> <!-- original div on page load -->
x *** нажмите *** x (представьте, что я щелкнул большим пальцем)
<div class="likediv">4</div> <!-- updated number -->
x *** щелкните *** x (представьте, что я снова щелкнул большим пальцем)
<div class="likediv">3</div> <!-- updated number -->
x *** щелкните *** x (представьте, что я снова щелкнул большим пальцем)
<div class="likediv">4</div> <!-- updated number -->
x *** щелкните *** x (представьте, что я снова щелкнул большим пальцем)
<div class="likediv">3</div> <!-- updated number -->
x *** щелкните *** x (представьте, что я снова щелкнул большим пальцем)
<div class="likediv">4</div> <!-- updated number -->
Я думаю, вы поняли.
Так как я могу это сделать? Посмотрите мой стартовый код выше, я думаю, что я близко.
Ах да, еще одна вещь. На странице много похожих кнопок, а не одна. так что нужно будет хранить и запоминать любые элементы div. Потому что нам нравятся комментарии и их много на странице.
Для этого, пожалуйста, используйте только jquery.
РЕДАКТИРОВАТЬ: ОБНОВЛЕНИЕ:
Так, это не сработало, ответ @ VIDesign, но я понимаю, почему. На самом деле, вот как выглядит HTML. (Обратите внимание, что я также включаю новый рабочий data-value как часть ответа @ VIDesign)
<div class="likediv">
<span class="dynamic-span" data-value="3">3</span>
</div>
Хорошо, очевидно, почему это не сработало, потому что, когда вы нажимаете, вы фактически нажимаете .likediv, но data-value="3" должен входить в промежуток, который вложен в div и не может быть затронут.
Итак, как мы можем запустить ответ @ VIDesign, за исключением того, что действие запускается при щелчке на div вне диапазона, когда span - это то, что содержит число и data-value?
Надеюсь, это было ясно. Извините, что не указал это изначально, я не знал до сих пор.
Итак, нам нужно изменить этот код ниже, чтобы работать с выше:
$(".likediv").click(function(){
// Use the data-value as the constant to calculate with
const actualValue = $(this).data("value");
// Set a max value
const maxValue = actualValue + 1;
// Get the value the user sees
const userValue = parseInt($(this).html());
// create an empty variable for the new value to display
let newValue;
// If the value the user sees is equal to the max value
if(userValue == maxValue){
// then subtract one
newValue = maxValue - 1;
}else{
// else add one
newValue = actualValue + 1;
}
// Display the new value to the user
$(this).html(newValue);
});
Обновление 2: я пробовал это, но это не сработало:
$(".likediv").click(function(){
// Use the data-value as the constant to calculate with
const actualValue = $(".dynamic-span").data("value");
// Set a max value
const maxValue = actualValue + 1;
// Get the value the user sees
const userValue = parseInt($(".dynamic-span").html());
// create an empty variable for the new value to display
let newValue;
// If the value the user sees is equal to the max value
if(userValue == maxValue){
// then subtract one
newValue = maxValue - 1;
}else{
// else add one
newValue = actualValue + 1;
}
// Display the new value to the user
$(".dynamic-span").html(newValue);
});
Примечание: Единственная проблема, с которой я сталкиваюсь, - это скорость , с которой он показывает пользователю во внешнем интерфейсе после того, как он нажал .
Я не пытаюсь сделать какое-либо сохранение в базе данных, и я не хочу попробовать получить любое значение из базы данных, которое будет избыточным (потому что это уже происходит успешно в другом коде в php в конце).
Это быстрый способ обновить скорость, с которой отображается показанное число . Помните, что когда php-код на внутреннем сервере обновляет div (обычно от 1 до 3 секунд), он будет переопределять все, что находится в этом div в настоящее время.
Кроме того, все, что здесь сделано, должно быть потеряно при перезагрузке страницы по замыслу. Это только демонстрация взлома внешнего интерфейса, а не фактическое обновление какого-либо кода на внутреннем интерфейсе.