为视障人士创建版本

Question

我想为视障人士创建一个版本，我找到了该剧本，但我不知道如何让它发挥作用..

/**
 * Created by Azamat Mirvosiqov on 29.01.2015.
 */

var curUrl = window.location.href;
var arCurUrl = curUrl.split('/');
var noImageTitle = 'Без картинки';
var setImageTitle = 'С картинкой';
switch (arCurUrl[3]){
    case 'uz':
        noImageTitle = 'Расмсиз';
        setImageTitle = 'Расмли';
        break;
    case 'oz':
        noImageTitle = 'Rasmsiz';
        setImageTitle = 'Rasmli';
        break;
    case 'en':
        noImageTitle = 'Without a picture';
        setImageTitle = 'With a picture';
        break;
}

var min = 16,
    max = 30;

function makeNormal() {
    $('html').removeClass('blackAndWhite blackAndWhiteInvert');
    $.removeCookie('specialView', {path: '/'});
}

function makeBlackAndWhite() {
    makeNormal();
    $('html').addClass('blackAndWhite');
    $.cookie("specialView", 'blackAndWhite', {path: '/'});
}

function makeBlackAndWhiteDark() {
    makeNormal();
    $('html').addClass('blackAndWhiteInvert');
    $.cookie("specialView", 'blackAndWhiteInvert', {path: '/'});
}

function makeSetImage() {
    $('html').removeClass( "noImage" );
    //$('.spcImage').removeClass( "spcSetImage" );
    $('.spcNoImage').removeClass( "spcSetImage" );
    $('.spcNoImage').attr('data-original-title', setImageTitle);
    $.removeCookie('specialViewImage', {path: '/'});
}

function makeNoImage() {
    $('html').stop().addClass( "noImage" );
    $('.spcNoImage').addClass( "spcSetImage" );
    $('.spcNoImage').attr('data-original-title', noImageTitle);
    $.cookie("specialViewImage", 'noImage', {path: '/'});
}

function offImages(){
    if ($.cookie("specialViewImage") == 'noImage'){
        makeSetImage();
    } else {
        makeNoImage();
    }
}

function setFontSize(size) {
    if (size < min) {
        size = min;
    }
    if (size > max) {
        size = max;
    }
    $('.title').css({'font-size': parseInt(size) + 9 + 'px'});
    $('.accordion li a, table td, .verticalMenu li a, .copyright').css({'font-size': parseInt(size) + 2 + 'px'});
    $('.main-news h1').css({'font-size': parseInt(size) + 4 + 'px'});
    $('.link_list a, .expmenu li a, .main-news p a').css({'font-size': parseInt(size) - 2 + 'px'});
    $('.smallText, .caption, .minif').css({'font-size': parseInt(size) - 4 + 'px'});

    $('.fontChangeable, .panel-classic .panel-heading, .menu li a, .breadcrumbs li, .classicGridViewListtext, .selectArea, .selectArea li a, .list .listItem').css({'font-size': size + 'px'});

    if (size > max - 7) {
        $('.news-container .main-news').hide();
        $('.news-container .listData').removeClass('col-md-6').addClass('col-md-12');
    } else {
        $('.news-container .main-news').show();
        $('.news-container .listData').removeClass('col-md-12').addClass('col-md-6');
    }
}

function saveFontSize(size) {
    $.cookie("fontSize", size, {path: '/'});
}
function changeSliderText(sliderId, value) {
    var position = Math.round(Math.abs((value - min) * (100 / (max - min))));
    $('#' + sliderId).prev('.sliderText').children('.range').text(position);
}

function setNarrator() {
    $('head').append($('<script type="text/javascript"><\/script>').attr('src', '/js/narrator.js'));
    narrator.init();
    $.cookie("narrator", 'on', {path: '/'});
    if (typeof($.cookie("speechVolume")) == 'undefined') {
        $("#speechVolume").slider('value', 100);
        $('#speechOptions .sliderText .range').text(100);
    } else {
        var speechVolume = $.cookie("speechVolume");
        $("#speechVolume").slider('value', speechVolume);
        $('#speechOptions .sliderText .range').text(speechVolume);
    }
}

function unsetNarrator() {
    $.cookie("narrator", null, { path: '/' });
    $('#speech').remove();
    removeJsCssFile('narrator.js', 'js');
}

$(document).ready(function () {
    var appearance = $.cookie("specialView");
    switch (appearance) {
        case 'blackAndWhite':
            makeBlackAndWhite();
            break;
        case 'blackAndWhiteInvert':
            makeBlackAndWhiteDark();
            break;
    }
    var noimage = $.cookie("specialViewImage");
    switch (noimage) {
        case 'noImage':
            makeNoImage();
            break;
        case 'setImage':
            makeSetImage();
            break;
    }

    $('.no-propagation').click(function (e) {
        e.stopPropagation();
    });

    $('.spcNormal').click(function () {
        makeNormal();
    });
    $('.spcWhiteAndBlack').click(function () {
        makeBlackAndWhite();

    });
    $('.spcDark').click(function () {
        makeBlackAndWhiteDark();
    });

    $('.appearance .spcNoImage').click(function () {
        offImages();
    });
    $('#fontSizer').slider({
        min: min,
        max: max,
        range: "min",
        slide: function (event, ui) {
            setFontSize(ui.value);
            changeSliderText('fontSizer', ui.value);
        },
        change: function (event, ui) {
            saveFontSize(ui.value);
        }
    });


    var fontSize = $.cookie("fontSize");
    if (typeof(fontSize) != 'undefined') {
        $("#fontSizer").slider('value', fontSize);
        setFontSize(fontSize);
        changeSliderText('fontSizer', fontSize);
    }

    Mousetrap.bind(['shift+return'], function() {
        $('#speechSwitcher').prop('checked', !$('#speechSwitcher').prop('checked'));
        $('#speechSwitcher').trigger('change');
        return false;
    });
});

.specview {
	padding: 10px 10px;
    width: 180px;
    top: 30px;
    left: 15px;
}
.specview ul.SpecIcon {
	padding: 0;
	text-align: center;
	vertical-align: middle;
	margin:0;
}
.specview .SpecIcon li {
	display: inline-block;
}
.specview .SpecIcon .menu-tooltip {
	display: inline-block;
	width: 18px;
	height: 18px;
	cursor: pointer;
	background-repeat: no-repeat;
	vertical-align: middle;
}
.specview .SpecIcon li:nth-child(1) .menu-tooltip {
	background-image: url(http://storage9.static.itmages.ru/i/16/0817/h_1471416193_7045679_23b9ee38a0.png);
}
.specview .SpecIcon li:nth-child(2) .menu-tooltip {
	background-image: url(http://storage7.static.itmages.ru/i/16/0817/h_1471416149_3522984_36177418b2.png);
}
.specview .SpecIcon li:nth-child(3) .menu-tooltip {
	background-image: url(http://storage8.static.itmages.ru/i/16/0817/h_1471416170_4231979_9ff0d51822.png);
}
.specview .SpecIcon li:nth-child(4) .menu-tooltip {
	background-image: url(http://storage2.static.itmages.ru/i/16/0817/h_1471416103_8192321_26213fe42c.png);
	margin-left: 10px;
}
.specview .SpecIcon li:nth-child(5) .menu-tooltip {
	background-image: url(http://storage8.static.itmages.ru/i/16/0817/h_1471416063_5847714_2343e6f912.png);
}
.specview .SpecIcon li:nth-child(6) .menu-tooltip {
	background-image: url(http://storage4.static.itmages.ru/i/16/0817/h_1471416126_9922342_796fce0f11.png);
}
.blackAndWhite{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
.noImage img{
    display: none !important;
}
.noImage .spheresList li span{
    background-image: none !important;
}
.blackAndWhiteInvert,
.blackAndWhiteInvert img,
.blackAndWhiteInvert embed,
.blackAndWhiteInvert video{
    -webkit-filter: grayscale(100%) invert(100%);
    -moz-filter: grayscale(100%) invert(100%);
    -ms-filter: grayscale(100%) invert(100%);
    -o-filter: grayscale(100%) invert(100%);
    filter: grayscale(100%) invert(100%);
}

<div class="dropdown-menu specview" aria-labelledby="SpecView">
            <div class="spec-triangle"></div>
              <ul class="SpecIcon">
                <li><div class="menu-tooltip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Уменшить шрифт"></div></li>
                <li><div class="menu-tooltip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Увелечить шрифт"></div></li>
                <li><div class="menu-tooltip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Исходный шрифт"></div></li>
                <li><div class="menu-tooltip spcWhiteAndBlack" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Черно-белый режим"></div></li>
                <li><div class="menu-tooltip spcDark" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Тёмный режим"></div></li>
                <li><div class="menu-tooltip spcNormal" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Обычный режим"></div></li>
              </ul>
          </div>

当我点击要为html标签添加类blackAndWhite并保存在cookie中的元素时...... 的 UPD 例如，我想在点击后添加一个类，并且变成黑白，我使用这个代码：

$(function(){
    $('.spcWhiteAndBlack').click(function(){
        $('html').toggleClass('blackAndWhite');
    });
});

并且页面变为黑白，我想在选择黑白时，选择保存在cookie中，其他页面也可以使用此模式