javascript - 将 JAVASCRIPT 转换为 JQUERY 以缩短代码

Question

您好，我设法使我们网站的功能正常工作，但它由 142 行组成，现在我正试图找到一种更聪明的方法来缩短我的代码长度，给您一个概述，这里有一个 fiddle :http://jsfiddle.net/4MaNy/

正如您在 fiddle 上看到的，它是单击特定按钮时触发的事件 我有 6 个按钮，命名为(CO1 到 CO6)，我做了 6 次下面的代码以使其工作(你可以在 fiddle 中看到)。

<script type="text/javascript">
    var modal = document.getElementById('modal');
    var shade = document.getElementById('shade');

    document.getElementById('CO1').onclick = function() {
        var src = "img2/Australia.jpg";
        var img = document.getElementById("placeholderImg");
        img.src = src;
        img.style.display = "inline";
        modal.style.display = shade.style.display = 'block';
    };



    document.getElementById('close2').onclick = function() {
        modal.style.display = shade.style.display = 'none';
    };
</script>

目前我正在尝试使用 SWITCH 语句在 Jquery 中转换它们，但我无法使其正常工作。

我为我的按钮添加了一个类名，即 ('.sbutton')。

JQUERY 代码:

$('.sbutton').on('click', function () {
    switch (this.val()) {
        case 'CO1':
            var src = "img2/Australia.jpg";
            var img = document.getElementById("placeholderImg");
            img.src = src;
            img.style.display = "inline";
            modal.style.display = shade.style.display = 'block';
            break;
    }
        //and so forth
});

Answer 1

您在 switch 内部使用 this.val() 但您应该使用 this.value 或 $(this).val()而不是它。 this 在您的案例中是一个 HTML 对象。