javascript - JQuery 更改 css 在鼠标释放时切换回

Question

我正在尝试创建一个相当简单的脚本，它使用链接来切换正在显示的 div。每天都有一个div，当点击相应的链接时，它会显示相应的div并隐藏其他div。

这是可行的，但是一旦您松开鼠标，它就会恢复到默认状态。我猜这是一件非常简单的事情，但我试过四处搜索但找不到任何东西。

这是我使用的代码:

Fiddle

$(document).ready(function() {

    var dayDivs = [];
    var displayDay = 0;
    loadDayDivs();
    adjustDayDisplay();

    $('.day-link').mousedown(function() {
        var linkClicked = $(this).text();
        switch (linkClicked) {
            case "Friday":
                displayDay = 0;
                break;
            case "Saturday":
                displayDay = 1;
                break;
            case "Sunday":
                displayDay = 2;
                break;
        }
        adjustDayDisplay();
    });

    function loadDayDivs() {
        dayDivs[0] = $(".friday-div");
        dayDivs[1] = $(".saturday-div");
        dayDivs[2] = $(".sunday-div");
    }

    function adjustDayDisplay() {
        for (var i = 0; i < dayDivs.length; i++) {
            dayDivs[i].css("cssText", "display: none !important;");
        }
        dayDivs[displayDay].css("cssText", "display: inline !important;");
    }

});

在 jsfiddle 上我得到一个奇怪的错误，它似乎通常与表单相关联。非常感谢对此的任何帮助。

Answer 1

您应该将鼠标按下事件更改为点击事件并抑制点击事件。

This fiddle 作品

$('.day-link').click(function(e) {
    e.preventDefault(); // New line