巧用javascript對象屬性,向事件綁定的匿名函數內傳遞迴圈控制變數的值

来源:http://www.cnblogs.com/yangtoude/archive/2016/11/18/6076302.html

遇到一個需要向匿名函數傳遞迴圈控制變數的問題,我受到園子里這篇文章的啟發【筆記】js獲取當前點擊元素的索引,解決了這個問題。現在把代碼貼出來,以防止自己忘記。 註意代碼中的第6行:給equipList[i]對象添加了一個index屬性,並將變數i賦值給它,這樣equipList[0]的index值為 ...


遇到一個需要向匿名函數傳遞迴圈控制變數的問題,我受到園子里這篇文章的啟發【筆記】js獲取當前點擊元素的索引,解決了這個問題。現在把代碼貼出來,以防止自己忘記。

 1   if ($('#labModal').length > 0) {
 2     var screenWidth = window.screen.width;
 3     var equipList = document.getElementsByClassName('equip-item');
 4 
 5     for (i = 0; i < equipList.length; i += 1) {
 6       equipList[i].index = i;  // 給equipList[i]對象添加一個index屬性並將i賦值給它
 7       equipList[i].onclick = function() {
 8         $('.item').removeClass('active');
 9         $('.item').eq(this.index).addClass('active');  // 在匿名函數內部引用index屬性
10         if (screenWidth > 768) {
11           $('#labModal').modal();
12         }
13       }
14     }
15   }

註意代碼中的第6行:給equipList[i]對象添加了一個index屬性,並將變數i賦值給它,這樣equipList[0]的index值為0,equipList[1]的index值為1,equipList[2]的index值為2,......,equipList[i]的index值為i,這樣就實現了我要的效果。然後在equipList[i]對象onclick綁定的函數中就可以直接用這個值了:this.index。不然的話,還有什麼其他方法將變數i的值傳遞到這個匿名函數中來實現上面的效果呢?

好吧,其實問題並不在“將迴圈控制變數i的值傳遞到匿名函數”中來,上面代碼的關鍵在於,給每一個equipList數組中的元素,也就是equip-item對象節點添加了一個index屬性,並給這個屬性分別賦值(比如,從0到16),最終的目的其實是為了獲取$('.item')[i]這個元素,然後再對其進行操作。

javascript真是靈活,在javascript中一切皆對象,而對象就是屬性的集合。

上面的for語句其實有些問題,最好這麼寫:

1 for (var i = 0; i < equipList.length; i += 1) {
2    // other codes
3 }

而ES6語法中,則引入了const和let,可以將上面的var換為let。至於為什麼要加上var,還有const和let與var相比又有什麼區別,等到有時間再研究下。

 

參考:

1,【筆記】js獲取當前點擊元素的索引


您的分享是我們最大的動力!

更多相關文章
  • Gradle是一種自動化建構工具,使用DSL來聲明項目設置。通過Gradle,可以對項目的依賴進行配置,並且自動下載所依賴的文件,使得構建項目的效率大大提高。 1. 安裝Gradle 下載Gradle的最新版本,並解壓,設置環境變數GRADLE_HOME,並且將%GRADLE_HOME%\bin添加 ...
  • 在面向對象的編程中,通常把用類創建對象的過程稱為實例化。 類名 對象名 = new 類名(參數1,參數2...參數n); 如 Date date=new Date();就是用日期類創建了一個日期的對象,就叫對象的實例化。 多數語言中,實例化一個對象 就是為對象開闢記憶體空間,或者是不用聲明,直接使用 ...
  • 一、Python安裝1、下載安裝包 https://www.python.org/downloads/2、安裝 預設安裝路徑:C:\python273、配置環境變數 【右鍵電腦】--》【屬性】--》【高級系統設置】--》【高級】--》【環境變數】--》【在第二個內容框中找到 變數名為Path 的一 ...
  • 原文地址: 阿裡巴巴前架構師 360 度無死角剖析微服務 簡述 Microservices(微服務) 1. 一些辭彙和技術 1)微服務 敏捷開發模式 SOA 分散式服務 2)Spring MVC Zookeeper Dubbo Spring Cloud 3) 服務註冊中心 服務網關 OpenStac ...
  • A集成代碼生成器 [正反雙向(單表、主表、明細表、樹形表,開發利器)+快速構建表單 下載地址 ; freemaker模版技術 ,0個代碼不用寫,生成完整的一個模塊,帶頁面、建表sql腳本,處理類,service等完整模塊B 集成阿裡巴巴資料庫連接池druid; 資料庫連接池 阿裡巴巴的 druid。 ...
  • 一、設計模式(Design pattern)是什麼? 設計模式是一套被反覆使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結。使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。 二、為什麼要有設計模式? 在軟體開發過程中,一個功能的實現方式多種多樣,不同方法的可擴展性、可維護 ...
  • 1 ABP創建資料庫操作步驟 1.1 SimpleTaskSystem.Web項目中的Web.config文件修改資料庫配置。 1.2 “程式包管理器控制台”選擇相應選項。 (1)程式包源:nuget.org (2)預設項目:SimpleTaskSystem.EntityFramework 1.3 ...
  • 最近想在網站上留下聯繫方式,想到自己沒少遇到過點擊超鏈接就喚醒qq的把戲,於是就搜了一下發現都是一個人的代碼。 講得也不是很清楚,就看了一下。 用瀏覽器打開以上的地址,會提示打開QQ運行,說明你沒有登錄QQ或者沒有檢測到QQ登錄,你點擊自動運行即可。 fuin代表主動添加的一方,uin是被加的一方, ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...