[英]how to get the index value after the img is clicked
用實際代碼來解釋我的問題可能會更容易。
<script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript'>
var username_array = [];
var text_array = [];
var virtual_name;
$(document).ready(function(){
document.body.style.backgroundColor= "rgb(0, 188, 237)";
var name = prompt("Please enter your name.");
if(name!=null){
x = "Hello " + name + "!";
a = document.createElement("p");
a.innerHTML=x;
document.body.appendChild(a);
b = document.createElement("p");
b.addEventListener('click',question,false);
b.style.cursor='pointer';
b.style.textDecoration="underline";
b.innerHTML="Check out what you look like on Twitter."
document.body.appendChild(b);
}
function question () {
$.ajax({
url: 'http://search.twitter.com/search.json?q='+name+'&callback=?&rpp=5',
type: 'GET',
dataType: 'json',
success: function (data){
for(i=0;i<data.results.length;i++) {
pic = data.results[i].profile_image_url;
var img = document.createElement("img");
img.setAttribute("id", "profile"+i);
img.src=pic;
img.width=50;
img.height=50;
img.addEventListener('click', realname, false);
img.style.cursor='pointer';
document.body.appendChild(img);
username = data.results[i].from_user_name;
username_array.push(username);
text = data.results[i].text;
text_array.push(text);
sequence = i;
}
check_array();
}
})
c = document.createElement("p");
c.innerHTML="Which one is you?"
document.body.appendChild(c);
}
});
function check_array() {
}
var sequence;
function realname() {
i=Math.floor(Math.random()*5);
d = document.createElement("p");
d.innerHTML="Here is your virtual name: " + username_array[i];
document.body.appendChild(d);
e = document.createElement("p");
e.innerHTML= username_array[i] +" actually has something to say to you:";
e.style.textDecoration="underline";
e.addEventListener('click',say,false);
e.style.cursor="pointer";
document.body.appendChild(e);
sequence = i;
}
</script>
我的問題是這一行:
function realname() {
i=Math.floor(Math.random()*5);
...}
和
img.addEventListener('click', realname, false);
理想情況下,我希望用戶單擊img,然后可以獲取它的索引值並將其傳遞給realname函數,這樣我就可以從data.result中獲取與個人資料圖片匹配的正確用戶名。 現在,我在函數實名內部生成的隨機“ i”只是偽造的,以便出現某些東西。
我不確定我是否解釋得足夠清楚。 謝謝任何人的幫助。
這是您打算做的一個實際示例: http : //jsfiddle.net/whizkid747/f77Ym/
我更改了將click事件附加到動態生成的圖像的方式:
$("img").click(function(event){
//alert(event.target.id);
realname(event.target.id.replace("profile",""));
});
此代碼將在您的DOM中的所有圖像上附加click事件。 您可能需要更改它,以便單擊僅附加到特定div中的圖像。 現在,從圖像的ID中,我們將刪除字符串配置文件,以便獲得索引號。
即使該示例可行,您仍嘗試以一種非常復雜的方式進行操作,如果您以jQuery的方式進行操作,則可以用較少的復雜性和代碼來編寫此功能。
試試這個,我對dom操作進行了一些更改,以將其轉換為使用jQuery
var username_array = [];
var text_array = [];
var virtual_name;
$(function() {
$('body').css('background-color', rgb(0, 188, 237));
var name = prompt("Please enter your name.");
if (name != null) {
x = "Hello " + name + "!";
$('<div>' + x + '</div>').appendTo('body');
$('<p>' + "Check out what you look like on Twitter." + '</p>')
.appendTo('body').css({
cursor : 'pointer',
textDecoration : "underline"
}).click(question);
}
function question() {
$.ajax({
url : 'http://search.twitter.com/search.json?q='
+ name + '&callback=?&rpp=5',
type : 'GET',
dataType : 'json',
success : function(data) {
for (i = 0; i < data.results.length; i++) {
pic = data.results[i].profile_image_url;
$('<img class="proile-pic" id="' + "profile" + i + '"></img>')
.appendTo('body').attr('src', pic)
.attr('width', 50).height('width',
50)
.css('cursor', 'pointer').click(
function() {
var index = $('.proile-pic').index(this);
realname(index);
});
username = data.results[i].from_user_name;
username_array.push(username);
text = data.results[i].text;
text_array.push(text);
sequence = i;
}
check_array();
}
})
c = document.createElement("p");
c.innerHTML = "Which one is you?"
document.body.appendChild(c);
}
});
function check_array() {
}
var sequence;
function realname(i) {
d = document.createElement("p");
d.innerHTML = "Here is your virtual name: " + username_array[i];
document.body.appendChild(d);
e = document.createElement("p");
e.innerHTML = username_array[i] + " actually has something to say to you:";
e.style.textDecoration = "underline";
e.addEventListener('click', say, false);
e.style.cursor = "pointer";
document.body.appendChild(e);
sequence = i;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.