شمارش data-count

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام وقت بخیراولین data-count=200 قرار دادم و موقع اجرا کردن بقیه رو هم فقط تا 200 میشماره.

DOCTYPE html>

<head>

<title>Documenttitle>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"

<style>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

background-color: lavender;

}

h2 {

top: 20%;

left: 50%;

transform: translate(-50%, -50%);

position: absolute;

}

.container-fluid {

width: 80vw;

}

.container {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

display: flex;

}

.wrapper {

height: 20vh;

width: 25vw;

margin: 10px;

background-color: rgb(206, 206, 231);

border-radius: 30px;

text-align: center;

position: relative;

}

.wrapper i {

font-size: 30px;

padding-top: 5%;

}

.wrapper .counter {

position: absolute;

bottom: 5%;

left: 50%;

transform: translate(-50%, -50%);

}

style>

head>

<body>

<h2>Third projecth2>

div>

div>

div>

<script

src="https://code.jquery.com/jquery-3.6.0.min.js"

integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="

crossorigin="anonymous"

>script>

$(document).ready(function () {

$(".counter").each(function () {

var $this = $('.counter');

var countTo = $this.attr('data-count');

$({ countNum: $this.text() }).animate(

{

countNum:countTo,

{

duration: 1800,

easing: 'linear',

step: function () {

$this.text(Math.floor(this.countNum));

complete:function () {

$this.text(this.countNum);

}

);

});

script>

body>

html>

الهه راد ۰۵ مرداد ۱۴۰۱، ۱۶:۰۵

درود

خط زیر باعث این موضوع میشه:

var $this = $('.counter');

برای اینکه براساس مقدار تعریف شده مجزا بشمره، کافیه به این صورت اصلاح کنید:

var $this = $(this);

درضمن ممنون میشم به دلیل مشکلات ادیتور فعلی، از این به بعد کدتون رو به صورت فایل پیوست یا درکدپن وارد کنید تا سریعتر بتونیم بررسی کنیم.

بهترین پاسخ

نازنین کریمی مقدم ۰۶ مرداد ۱۴۰۱، ۱۶:۱۷