之前在某官網課程上看有關jQuery和bootstrap的相關教程，有一節課是教我們如何制作價格菜單的按鈕以及總價問題

選中按鈕，按鈕樣式會發生變化，右上角價格會自動運算

6個菜單的html結構差不多，先貼出一個菜單的html，如下：

<div class="col-xs-12 col-sm-4"><div class="panel panel-warning"><div class="panel-body"><span class="title">Southen Style</span><span class="desc">Darius Rucker</span><span class="price">$20.90</span></div><div class="panel-footer text-center"><div class="btn-group" data-toggle="buttons"><label class="btn btn-primary"><span class="glyphicon glyphicon-unchecked"></span><input type="checkbox" id="chk6" name="products" checked="checked"><label for="chk6">Not Selected</label></label></div></div></div></div>

javascript代碼如下：

let checkOptions={//創建一個對象，可以在此代碼塊統一修改信息id:"",checkedGlyph:"glyphicon-check",unCheckedGlyph:"glyphicon-unchecked",checkedBtnClass:"btn-success",unCheckedBtnClass:"btn-primary",checkedText:"Selected",unCheckedText:"Not Selected"};$(document).ready(function () {$("[type='checkbox']").on('change', function () {if ($(this).prop('checked')) {setChecked($(this));} else {unChecked($(this));}caculateTotal($(this));});let checked=$("input:checked");//console.log("checked=="+checked);for (let i=0;i<checked.length;i++) {// console.log("checked["+i+"]=="+checked[i]);//setChecked(checked[i]);setChecked(checked);caculateTotal(checked[i]);}});function setChecked(ct1) {ct1.prev().removeClass(checkOptions.unCheckedGlyph).addClass(checkOptions.checkedGlyph).next().next().text(checkOptions.checkedText).parent().removeClass(checkOptions.unCheckedBtnClass).addClass(checkOptions.checkedBtnClass).addClass('active');}function unChecked(ct1) {ct1.prev().removeClass(checkOptions.checkedGlyph).addClass(checkOptions.unCheckedGlyph).next().next().text(checkOptions.unCheckedText).parent().removeClass(checkOptions.checkedBtnClass).removeClass("active").addClass(checkOptions.unCheckedBtnClass);}function caculateTotal(ct1) {let tt=$("#total");let total = tt.text();total=stripCurrency(total);let price=$(ct1).closest(".panel").find(".price").text();price=stripCurrency(price);if($(ct1).prop("checked")){total=parseFloat(total)+parseFloat(price);}else{total=parseFloat(total)-parseFloat(price);}tt.text(formatcurrency(total));}function stripCurrency(value){value=value.replace(/(\s|,|\$)/g ,"");//正則表達式value=parseFloat(value);return value;}function formatcurrency(value,decimals,decpoint,separator,symbol){decimals=(typeof decimals=='undefined' ? 2:decimals);//小數decpoint=(typeof decpoint=='undefined'? '.':decpoint);separator=(typeof separator=='undefined' ? ',':separator);symbol=(typeof symbol=='undefined' ? '$':symbol);let parts=value.toFixed(decimals).toString().split(decpoint);//toFixed(把數字轉換為字符串，結果的小數點后有指定位數的數字)parts[0]=parts[0].replace(/\B(?=(?:\d{3})+(?!\d))/g,separator);//正則表達式return (symbol+parts.join(decpoint)).toLocaleString();}

各位父老鄉親同志們！有沒有發現代碼好像有點奇怪？？？

let checked=$("input:checked");//console.log("checked=="+checked);for (let i=0;i<checked.length;i++) {// console.log("checked["+i+"]=="+checked[i]);// setChecked(checked[i]);setChecked(checked);//為什么這段的checked不用checked[i]替換？就像下一行代碼一樣？？？caculateTotal(checked[i]);}

于是乎自以為是的我就加上去了，沒想到！錯誤！

什么鬼東西？為什么下一行的代碼也是用了【i】啊，

然后我就log一下checked和checked【i】分別代表了什么

嗯.....原來是我函數里面的對象搞錯了，checked是jquery對象（類數組對象），他所返回的每個子集都是DOM對象

而jquery對象與DOM對象之間的方法都是獨立的，不能jquery使用DOM的方法，相反亦然。

所以你只要在jquery對象后面再加個[index]就能轉變為DOM對象

即?

var $jqName=$("#idName"); //jquery對象var name?= $jqName[0]; //dom對象?console.log(name.checked); //檢測這個checkbox是否給選中

所以此例中，checked[i]返回的都是input這個DOM對象，它當然沒有prev()這個函數了，只有jquery對象才內置有函數的，你看，caculateTotal（checked[i]）之所以可以是因為這個函數里面他又用$(ct1)轉化成了jquery對象，而我這個setChecked函數他就直接用ct1.prev()來表示

因為本例中函數內的方法都是jquery內置的函數，所以暫時考慮把對象都轉化為jquery對象，有兩種修改方法，一種是直接把要改的函數里的對象都換成類數組對象（保留setChecked(checked)），另一種就是把要改的函數里的對象都換成DOM對象，但是外面要用$()包圍住（保留setChecked(checked[i]) ）

方法一：jquery對象轉化為DOM對象，我要把 setChecked(checked) 替換成 setChecked(checked[i]) 那么后面此函數內的ct1要換成$(ct1)才行得通，即

function setChecked(ct1) {$(ct1).prev().removeClass(checkOptions.unCheckedGlyph).addClass(checkOptions.checkedGlyph).next().next().text(checkOptions.checkedText).parent().removeClass(checkOptions.unCheckedBtnClass).addClass(checkOptions.checkedBtnClass).addClass('active');}function unChecked(ct1) {$(ct1).prev().removeClass(checkOptions.checkedGlyph).addClass(checkOptions.unCheckedGlyph).next().next().text(checkOptions.unCheckedText).parent().removeClass(checkOptions.checkedBtnClass).removeClass("active").addClass(checkOptions.unCheckedBtnClass);}

其實單看下面的代碼中的this你也可以知道$("[type='checkbox']")這個jquery對象它只會返回DOM對象input，如果要利用返回值引用jquery內置的函數，還是要在本身加上$()才行

$("[type='checkbox']").on('change', function () {if ($(this).prop('checked')) {setChecked($(this));} else {unChecked($(this));}caculateTotal($(this));});

? ? ?

方法二：DOM對象轉化為jquery對象，把caculateTotal(checked[i])換成caculateTotal(checked)，代碼就變成這樣的了，不需要for循環了

let checkOptions={//創建一個對象，可以在此代碼塊統一修改信息id:"",checkedGlyph:"glyphicon-check",unCheckedGlyph:"glyphicon-unchecked",checkedBtnClass:"btn-success",unCheckedBtnClass:"btn-primary",checkedText:"Selected",unCheckedText:"Not Selected"};$(document).ready(function () {$("[type='checkbox']").on('change', function () {if ($(this).prop('checked')) {setChecked($(this));} else {unChecked($(this));}caculateTotal($(this));});let checked=$("input:checked");console.log("checked=="+checked);setChecked(checked);//改了這里噢噢噢噢caculateTotal(checked);/*for (let i=0;i<checked.length;i++) {console.log("checked["+i+"]=="+checked[i]);// setChecked(checked[i]);setChecked(checked);caculateTotal(checked[i]);}*/});function setChecked(ct1) {ct1.prev().removeClass(checkOptions.unCheckedGlyph).addClass(checkOptions.checkedGlyph).next().next().text(checkOptions.checkedText).parent().removeClass(checkOptions.unCheckedBtnClass).addClass(checkOptions.checkedBtnClass).addClass('active');}function unChecked(ct1) {ct1.prev().removeClass(checkOptions.checkedGlyph).addClass(checkOptions.unCheckedGlyph).next().next().text(checkOptions.unCheckedText).parent().removeClass(checkOptions.checkedBtnClass).removeClass("active").addClass(checkOptions.unCheckedBtnClass);}function caculateTotal(ct1) {let tt=$("#total");let total = tt.text();total=stripCurrency(total);let price=ct1.closest(".panel").find(".price").text();//這里也改了哦哦哦price=stripCurrency(price);if(ct1.prop("checked")){//這里也是改了哈哈哈total=parseFloat(total)+parseFloat(price);}else{total=parseFloat(total)-parseFloat(price);}tt.text(formatcurrency(total));}function stripCurrency(value){value=value.replace(/(\s|,|\$)/g ,"");value=parseFloat(value);return value;}function formatcurrency(value,decimals,decpoint,separator,symbol){decimals=(typeof decimals=='undefined' ? 2:decimals);//小數decpoint=(typeof decpoint=='undefined'? '.':decpoint);separator=(typeof separator=='undefined' ? ',':separator);symbol=(typeof symbol=='undefined' ? '$':symbol);let parts=value.toFixed(decimals).toString().split(decpoint);//toFixed(把數字轉換為字符串，結果的小數點后有指定位數的數字)parts[0]=parts[0].replace(/\B(?=(?:\d{3})+(?!\d))/g,separator);return (symbol+parts.join(decpoint)).toLocaleString();}

不過還是有疑問，jquery這個類數組對象就可以不用for循環然后他自己就會遍歷全身然后把相應的對象放入到正確的函數當中了？，比如說這例中的$(input：checked)作為參數放入函數中，之后所有的input：checked對象都套上了該套上的函數....嗯，有待思考啊這個問題（有空解決！！）

這篇文章可能會有點思路不清，不懂的小伙伴可以留言哦，我能解決的話一定解決！

后面有時間我會相應的介紹一下的正則表達式的一些規則哦，列一個知識清單哈哈哈

總結

以上是生活随笔為你收集整理的关于jQuery对象（类数组对象）以及DOM对象相互转化问题——[object Object]和[object HTMLInputElement]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。