Question

我刚刚开始学习jQuery，我正在观看视频教程，并试图找到不同的方法来完成比学习视频教程。

我有两个按钮，白天和黑夜。如果我单击Day，我希望禁用Day按钮并加载日期样式表。如果我点击Night，我想加载Night样式表并禁用Night按钮，但是然后启用Day按钮。

忍受我，这是我的代码，ihavenoideawhatimdoing.jpg。这不是我的完整代码，只发布了相关代码。

<head>
    <link rel="stylesheet" href="day.css">
</head>

<button data-file="day">Day</button>
<button data-file="night">Night</button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>

    // self executing function
    (function() {
        var link = $('link');
        var button = $('button');
        var $this = $(this);

        if (button.data('file', 'day').click()) {
            link.attr('href', 'night.css');
            $this.attr('disabled');
            // code to enable night button, not sure how
        }
        else (button.data('file', 'night').click()) {
            link.attr('href', 'day.css');
            $this.attr('disabled');
            // code to enable the day button, not sure how
        }
    })();

</script>

另外，另一个问题。

(function() {
    // code
})();

该函数是否会在页面加载时执行，我的意思是该函数中的任何代码？我认为视频中的人称之为自治功能。

谢谢！

Answer 1

<head>
    <link rel="stylesheet" href="day.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<button id="day" disabled>Day</button>
<button id="night">Night</button>

<script type="text/javascript">
    $(function() {
        var link = $('link[href="day.css"]'),
            buttons = $('button');
        buttons.on('click', function() {
            link.attr('href', this.id+'.css');
            buttons.not(this).removeAttr('disabled');
            $(this).attr('disabled', 'disabled');
        });
    });
</script>

这是一个fiddle，您可以在控制台中看到样式表更改。

Answer 2

.click语句将触发对元素的单击。在每次事件发生时选择元素以触发该函数后，将函数传递给它。

(function() {
    var link = $('link');
    var button = $('button');
    var $this = $(this); // not sure what this is, so will need to be updated

    button.click(function () {
        if (button.data('file', 'day')) {
            $('#day-button').attr('disabled', true);
            $('#night-button').removeAttr('disabled');
            link.attr('href', 'night.css');
        } else {
            $('#day-button').removeAttr('disabled');
            $('#night-button').attr('disabled', true);
            link.attr('href', 'day.css');
        }
    });
})();

Answer 3

该功能本身不会执行。您必须将其放在文档准备就绪（在页面加载时执行。）

$(document).ready(function(){
    (function() {
        var link = $('link');
        var button = $('button');
        var $this = $(this);

        if (button.data('file', 'day').click()) {
            link.attr('href', 'night.css');
            $this.attr('disabled');
            // code to enable night button, not sure how
        }
        else (button.data('file', 'night').click()) {
            link.attr('href', 'day.css');
            $this.attr('disabled');
            // code to enable the day button, not sure how
        }
    })();
});

根据条件使用jQuery将按钮更改为禁用？

3 个答案: