如何运行功能与参数点击

How to run function on click with parameters

本文关键字：参数 功能 何运行 运行      更新时间：2023-09-26

我目前正在做一个测验，其中特定的答案加载图像，基于一个选择的答案。所以我抓住了"输入"标签，现在我有他们来操纵。然而，我不知道如何运行我的函数，而把输入[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抓取输入，但我不知道最终会有多少输入，我不希望我的代码专门为此工作

你可以这样做:

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

我想;看看你正在做什么，你所需要的只是:

$(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，因为您有循环。

尝试以下代码:

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

你可以检查一下这是否适合你

相关文章：