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]);问题是您正在将点击处理程序与函数的结果getImages(argument)（而不是函数引用）绑定，该函数不返回任何内容，因此undefined将设置为这些输入的点击处理程序，并且图像将设置为最后一个相应的相应 src input(name) 由于您拥有的循环。

于 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 回答