Question

用实际代码解释我的问题可能更容易。

<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中的配置文件图像匹配的正确用户名。现在我生成内部函数realname的随机“i”只是假的，以便得到一些东西。

我不确定我是否应该清楚地解释清楚。感谢任何人都可以帮忙。

Answer 1

以下是您打算做的工作示例：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方式，这个功能可以用较少的复杂性和代码编写。

Answer 2

试试这个，我对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;
}

单击img后如何获取索引值

2 个答案: