Question

我目前正在根据所选择的答案进行测验，其中特定答案会加载图片。所以我抓住了'输入'标签，现在我让它们被操纵了。但是，我不知道如何运行我的函数，同时输入input [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获取输入，但我不知道最终会有多少输入，我不希望我的代码专门用于此。< / p>

Answer 1

你可以这样做：

$('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);
});

Answer 2

我想;看看你在做什么，你可能需要的只是：

$(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.
}

Fiddle

使用您的语句inputs[i].onclick = getImages(inputs[i]);，问题在于您使用函数getImages(argument)（而不是函数引用）的结果来绑定点击处理程序，该结果不返回{{1将被设置为这些输入的单击处理程序，并且由于您拥有的循环，图像将被设置为最后一个相应输入（名称）的相应src。

Answer 3

请尝试以下代码：

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];
    }
}

<击> 您可以尝试jQuery的index()功能。

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

~~您可以在this fiddle检查这是否适合您~~

如何使用参数单击运行功能

3 个答案:

Fiddle