0

I just started learning jQuery and I'm watching video tutorials and trying to find different ways to accomplish things than in the video tutorial for learning purposes.

I have two buttons, Day and Night. If I click Day, I want the Day button to be disabled and to load the day style sheet. If I click Night, I want to load the Night stylesheet and disable the Night button, but then enable the Day button.

Bear with me, here's my code, ihavenoideawhatimdoing.jpg. This isn't my full code, only posted relevant code.

<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>

Also, another question.

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

Will that function execute upon page load, I mean any code within that function? I think the guy in the video called it an autonomous function.

Thanks!

4

3 回答 3

2 
<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>​

Here's a fiddle, you can see the stylesheet change in your console.

于 2012-05-24T22:54:44.387 回答
1

The .click statement will trigger a click on the element. Pass a function to it after selecting the element to trigger that function every time the event occurs.

(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');
        }
    });
})();
于 2012-05-24T22:44:59.523 回答
0

The function will not execute by itself. You have to put that within document ready (gets executed when the page loads.) 

$(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
        }
    })();
});
于 2012-05-24T22:37:03.320 回答