1. 프로젝트의 제품 평가 페이지가 발생했으며 제품의 스타 평가가 포함되어 있습니다. 그 당시 나는 방금 효과를 적어 두었습니다 (즉, 사용자가 몇 개의 별을 보여주기 위해 몇 개의 별을 클릭했습니다).
내가 페이지를 만들고 백엔드 동료에게 넘겨 주었을 때, 그는 내가 이것을하는 것이 의미가 없다고 말했고 그는 그것을 할 수 없었습니다. 그 당시, 내 마음은 약간 혼란 스러웠습니다.
나중에 백엔드의 동료는 그가 어려움을 겪을 것이라고 말했다. 21 세기 햇볕이 잘 드는 젊은이로서 어떻게 동료들이 자신의 임무를 완수하도록 도와 줄 수 있었습니까?
동료들의 조언과 내 탐험을 통해 마침내 여기서 관계를 이해했습니다. 이제이 프로그램을 작성하는 방법과 내 자신의 말을 통해 어떤 작업을 수행 해야하는지 설명하겠습니다.
A, 그림이 위입니다.
B : 위의 그림은 5 개의 조명 중 하나와 다른 4 개의 조명 중 하나를 검토했습니다. 이렇게 만드는 것은 무엇입니까? 아래 그림을 참조하십시오.
예, 예, 출발 별의 빛이있는 별의 수는 데이터 때문입니다.
C : 이제 우리는이 데이터에 대해 이야기 할 수 있지만이 데이터는 무엇입니까?
프론트 엔드와 백엔드는 데이터가 저장되는 위치에 동의 한 것으로 밝혀졌습니다 (Tada 또는 TDAT라는 이름을 줄 수 있음). 백엔드는 값을 할당 할 수 있으며 데이터는 별만큼 많은 별과 같습니다. 그러나 왜이 데이터가 필요합니까?
Jiang Zi : 사용자 A가 별을 클릭 할 때 사용자 B 사용자 C 사용자 D ...을 볼 수 있으므로 사용자가 클릭 한 별 수는 특정 장소 (즉, 데이터)에 저장 (즉, 데이터)을 얻을 수 있도록해야합니다.
즉, 프론트 엔드는 값을 지정하고 백엔드는 값을 가져 오며 백엔드는 데이터베이스에 얻은 데이터를 저장 한 다음이를 데이터에 재 할당하여 사용자 A가 평가 한 긍정적 인 별의 수를 표시합니다.
프론트 엔드 할당 ------》 백엔드 값-》 백엔드 스토리지 데이터-저장된 데이터를 기반으로 프론트 엔드에 대한 백엔드 피드백-》 프론트 엔드는 뒷면의 데이터 피드백을 기반으로 페이지에 해당 효과를 표시합니다.
자, 논리를 이해하면 프로그램을 쓸 수 있습니다.
$ ( '. Evaluate_mark'). 각 (function () {var star = $ (this) .find ( '. u-grade'). att ( 'data'); att ( 'data'); // 데이터 하나는 5이고 다른 하나는 4/*alert (star)*/$ (this) .find ( '. u-grade div'). Removeclass ( 'light'); div '). 각 (함수 (i, ele) {// ele의 현재 요소, i <star (i <star) { / *alert (i); * / /alert (ele); * /$ (ele); addclass ('light ');});위의 코드는 비교적 간단합니다. 먼저, 반복하고 아래의 div를 찾으십시오.
그것을 찾은 후, 모든 조명을 제거합니다 (빛은 CSS에서 별을 밝히는 클래스입니다). Star는 데이터 값을 얻었으며 i <star를 기반으로 판단되었습니다.
이것은 별의 밝기의 수, 즉 위의 첫 번째 그림은 밝고, 하나는 밝고, 하나는 밝고, 하나는 밝고, 하나는 밝고, 하나는 밝고, 다른 하나는 밝고, 다른 하나는 밝고, 다른 하나는 밝고, 다른 하나는 밝고, 숫자는 밝고 숫자는 밝습니다.
4.1 :이 시점에서 우리는 백엔드 할당과 프론트 엔드 성능 효과를 완료했습니다. 현재 두 조각이 남아 있습니다.
하나는 사용자가 효과를 생성하기 위해 클릭하는 부분이고, 다른 하나는 사용자의 값을 데이터의 현재 별을 클릭하는 것입니다 (백엔드가 값을 저장하고 값을 재 할당하고 표시하도록합니다).
4.2 : 사용자 클릭의 효과를 보여주기 위해 다음을 수행합시다.
$ (function () {$. setgrade = function ($ ele, index) {var $ item = $ ele.find ( ". u-grade_item"); $ item.removeClass ( "light"); $ item.slice (0, index+1) .addCrass ( "light"); /*alert (index+1); .u-grade_item "); $ item.click (function () {var $ this = $ (this); /*현재 $ item object를 저장하기위한 변수를 정의하십시오* /var index = $ this.parent (". u-grade "). children (". u-grade_item "). Index ($ this); 색인의 인덱스 위치를 반환합니다. element/ *index (index) */ $ this.parent (), index);A : 코드 구현에 대해 하나씩 이야기하지 않을 것입니다. 의견을 읽을 수 있습니다. 이런 식으로 사용자는 클릭하여 효과를 생성합니다. 아래에는 마지막이 있습니다. 사용자가 클릭 한 별의 값을 데이터에 할당하십시오.
명확하게하기 쉽습니다.
(function () {var $ item = $ ( ". u-grade .u-grade_item"); $ item.click (function () {var $ this = $ (this); var index = $ this.parent ( ". u-grade_item"). index ($ this); var star = $ (this). 데이터 값 $ .setgrade ($ this.parent (), index);좋아,이 기사의 전체 내용이 소개되었습니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!