Home/ Questions/Q 8015617
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T20:18:13+00:00

I just started learning jQuery and I’m watching video tutorials and trying to find

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <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.

    • 0