如何创建一个辅助函数来使用jQuery更改图像？

Question

I tried to create an imgLoader function that take in 3 arguements :

• btn : the btn that got click
• img : the specific img that will be load on
• imgPath : the path to the img that I want to load

I also want the btn to be optional, so I check if btn is true.

Here is what I come up with :

function imgLoader( btn, img, imgPath) {

    if (btn) {
        $btnBiDefault.removeClass('btn-bi-default-clicked');
        btn.addClass('btn-bi-default-clicked');
    }

    img.attr('src', imgPath);

}

I tried to call imgLoader in one of my click funtion :

$name.click(function(e) {
    e.preventDefault();

    imgLoader({
        img: $img,
        imgPath: '/path-to-img/image.png'
    });
});

I got 0 error, not even warning on my .js file. I couldn't get my img to load.

I keep getting :

Uncaught TypeError: btn.addClass is not a function

Can someone please give me a hint ?

Answer 1

You should probably pass an object instead of three separate variables. This allows you to have greater control of what you're able to send to the function. For example, you could call your imgLoader function with no button: imgLoader({img: "...", imgPath: "..."}) or with a button: imgLoader({btn: $(ele), img: "...", imgPath: "..."}) .

The order of the elements within the object you're passing is irrelevant, and can be called using dot notation: args.item .

Try something like this:

 function imgLoader(args) { "use strict"; if (typeof args.btn !== "undefined") { // Do things with your button here. } $(args.img).attr('src', args.imgPath); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" onClick="imgLoader({btn: this, img: '#imgID', imgPath: 'http://lorempixel.com/400/200/cats'})">Get a cat</button> <img id="imgID" alt="A random cat." />