傳遞對象到一個jquery函數

Question

如果有一個jQuery代碼

var info = $("#info"); 
 

 
for (var i = 0; i < 3; i++) { 
 
    $("p").eq(i).on("click", function(event) { 
 
    var reply = [ 
 
     " message=message for first p", 
 
     "index = " + $(this).index(), 
 

 

 
    ]; 
 
    info.append(reply.join(", ") + "<br>"); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 0 </p> 
 
<p> 1 </p> 
 
<p> 2 </p> 
 
<div id="info"></div>

這裏的答覆陣列我需要根據給定爲值對於每個p添加自定義消息內我怎麼才能在jQuery中實現它？我知道一點，data屬性可以使用但不清楚它。

UPDATE： 我需要一個對象來存儲on()方法中的值。

Answer 1

注意，for循環，.eq()並創建一個數組以呼叫.join(", ")是沒有必要的。

$("p")選擇document中的所有<p>元素，而不將過濾器應用於選擇器。

您可以連接字符串片段而不創建數組，並且.join()。

致電this.tagName："P"作爲.index()的參數，將結果推送到click處理程序之外定義的數組。

var info = $("#info"); 
 
var arr = []; 
 
var p = $("p").on("click", function(event) { 
 
    var index = $(this).index(this.tagName); 
 
    var reply = " message=message for first p" 
 
       + ", index = " 
 
       + index 
 
    arr.push(index); 
 
    info.append(reply + "<br>"); 
 
    console.log(arr); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 0 </p> 
 
<p> 1 </p> 
 
<p> 2 </p> 
 
<div id="info"></div>

Answer 2

如果可以使用data屬性只是存儲在一個data屬性的消息（如data-message），並使用jQueryElement.attr('data-message')或jQueryElemenet.data('message')像這樣得到它：

var info = $("#info"); 
 

 
for (var i = 0; i < 3; i++) { 
 
    $("p").eq(i).on("click", function(event) { 
 
    var message = $(this).data("message"); // get the data-message of this p 
 
    info.append(message + "<br>");   // use it ... 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p data-message="hey this is the first"> 0 </p> 
 
<p data-message="and this is 2"> 1 </p> 
 
<p data-message="this will be the THIRD"> 2 </p> 
 
<div id="info"></div>