使用Jquery

时间:2018-08-11 11:29:21

标签: javascript jquery

/// <reference path="jquery-3.3.1.js" />

var functionArray = [$('.img').show, $('.img').hide, $('.img').toggle, $('.img').fadeIn, $('.img').fadeOut, $('.img').fadeToggle];
var buttonArray = [$('.show'), $('.hide'), $('.toggle'), $('.fadein'), $('fadeout'), $('.fadetog')];
var counter = 0;
while (counter < buttonArray.length) {
    buttonArray[counter].click(function () {
        functionArray[counter]();
    })
    counter++;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
</head>
<body>
    <img src="Untitled-1.png" />
    <br />
    <button class="show">Show</button>
    <button class="hide">Hide</button>
    <button class="toggle">Toggle</button>

    <button class="fadein">Fade in</button>
    <button class="fadeout">Fade out</button>
    <button class="fadetog">Fade toggle</button>

    <script src="Scripts/jquery-3.3.1.js"></script>
    <script src="Scripts/Script1.js"></script>
</body>
</html>

我希望每个按钮都可以对图像执行特定的功能,所以我遍历了类数组和函数数组,但这给了我一个错误:

Uncaught TypeError: functionArray[counter] is not a function
    at HTMLButtonElement.<anonymous> (Script1.js:8)
    at HTMLButtonElement.dispatch (jquery-3.3.1.js:5183)
    at HTMLButtonElement.elemData.handle (jquery-3.3.1.js:4991)

这是怎么了?

0 个答案:

没有答案