0

現在、選択した回答に基づいて、特定の回答が画像をロードするクイズを作成しています。だから私は「入力」タグをつかみました、そして今、私はそれらを操作するために持っています。ただし、入力 [i] をパラメーターとして入れながら、関数を実行する方法がわかりません。

各入力[i]が異なることを考慮すると、私の考えは次のとおりです。

$('input').click(getImages)

失敗した。そのため、他にどこに行くべきかわかりません。

// run getImages
$(document).ready(function(){
    var inputs = document.getElementsByTagName('input');
    for (var i = 0 ; i < inputs.length ; i++ )
    {
        inputs[i].onclick = getImages(inputs[i]);
    }
})



function getImages(x){
    // variables
    var p1 = document.getElementById('p1');
    var p2 = document.getElementById('p2');
    var images = {
        '1.1' : 'images/aggressive.jpg',
        '1.2' : 'images/compassionate.jpg',
        '1.3' : 'images/timid.jpg',
        '2.1' : 'images/clean.jpg',
        '2.2' : 'images/moderate.jpg',
        '2.3' : '',
    }

    if (x.name === '1')
    {
        p1.src = images[x.value];
    }
    if (x.name === '2')
    {
        p2.src = images[x.value];
    }
}

私がうまくいくと感じた解決策は、個々の ID で入力を取得することですが、最終的にいくつの入力が得られるかわかりません。コードをそのために特別に機能させたくありません。

4

3 に答える 3

4

次の方法で実行できます。

$('input').click(function() {
    getImages(parameters);
});

または次のようなもの：

$('input').click(function() {
    var x = 1;
    // Or to get the params from the current element, use something like this:
    x = $(this).attr("src");
    getImages(x);
});
于 2013-06-11T01:10:05.027 に答える
3

おもう; あなたがしていることを見て、必要なのはこれだけです：

$(document).ready(function(){
    $('input').click(getImages); //Bind the click handler
});

 var images = {
        '1.1' : 'images/aggressive.jpg',
        '1.2' : 'images/compassionate.jpg',
        '1.3' : 'images/timid.jpg',
        '2.1' : 'images/clean.jpg',
        '2.2' : 'images/moderate.jpg',
        '2.3' : '',
    }


function getImages(e){
     var img = 'p' + this.name; //Get the respective image id based on the input's name
     document.getElementById(img).src=images[this.value]; //Grab the image src from the list and set the value.
}

フィドル

あなたのステートメントの問題は、クリックハンドラーを関数の結果（関数参照の代わりにinputs[i].onclick = getImages(inputs[i]);）にバインドしていることです。これは何も返さないため、これらの入力のクリックハンドラーとして設定され、画像は最後のそれぞれのsrcに設定されますあなたが持っているループのためにinput（name）。getImages(argument)undefined

于 2013-06-11T01:32:06.863 に答える
1

次のコードを試してください。

var p1, p2, images;
// run getImages
$(document).ready(function(){
    setup();
    $('input').click(function(){
        //if you want to pass jquery object uncomment following line
        //getImages($(this));
        //this passes html object 
        getImages(this);
    });
})

/*you don't need to do this every time*/
function setup(){
    // variables
    p1 = document.getElementById('p1');
    p2 = document.getElementById('p2');
    images = {
        '1.1' : 'images/aggressive.jpg',
        '1.2' : 'images/compassionate.jpg',
        '1.3' : 'images/timid.jpg',
        '2.1' : 'images/clean.jpg',
        '2.2' : 'images/moderate.jpg',
        '2.3' : '',
    }
}

function getImages(x){
    if (x.name === '1')
    {
        p1.src = images[x.value];
    }
    if (x.name === '2')
    {
        p2.src = images[x.value];
    }
}

index()jQueryの機能を 試すことができます。

$("button#test").on("click",function(){
   alert($(this).index());
});

このフィドルでこれがうまくいくかどうかを確認できます

于 2013-06-11T01:25:35.863 に答える