2

私の質問を実際のコードで説明する方が簡単かもしれません。

<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」は、何かを表示するための単なる偽物です。

私はそれを十分に明確に説明したかどうか確信が持てません。どなたでもご利用いただけますので、よろしくお願いいたします。

4

2 に答える 2

1

これは、あなたが意図したことの実例です: http://jsfiddle.net/whizkid747/f77Ym/

動的に生成された画像にクリック イベントをアタッチする方法を変更しました。

$("img").click(function(event){
    //alert(event.target.id);
    realname(event.target.id.replace("profile",""));

    });

このコードは、DOM 内のすべての画像にクリック イベントをアタッチします。クリックが特定の div 内の画像にのみ関連付けられるように変更する必要がある場合があります。画像の ID から文字列プロファイルを削除して、インデックス番号を取得します。

この例は機能しますが、非常に複雑な方法でこれを実行しようとしています。jQuery の方法を考えると、この機能は複雑さとコードを減らして作成できます。

于 2013-03-01T03:47:14.977 に答える
0

これを試してください。jQueryを使用するように変換するためにdom操作にいくつかの変更を加えました

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;
}
于 2013-03-01T03:55:34.517 に答える