Как сделать так, чтобы флажок переключателя изменял фон героя взад-вперед?

Question

Это текущие фрагменты кода. Я пробовал несколько разных способов, и ничего не работает. Пожалуйста, помогите !!!

HTML Фрагмент

 <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
       <span class="onoffswitch-inner"></span>
       <span class="onoffswitch-switch"></span>
    </label>
  </div>

JQuery Фрагмент

var backgroundImg = ['../images/heroBG.jpg', '../images/heroBG2.jpg'
];
var backgroundCount = 0;

$(function () {
    $('hero').css('background', 'url(' + backgroundImg[backgroundCount] + ')');
});

$('myonoffswitch').on('click', function () {
    backgroundCount++;
    if (backgroundCount > backgroundImg.length - 1) backgroundCount = 0;
    $('hero').css('background', 'url(' + backgroundImg[backgroundCount] + ')');
});

Answer 1

В jQuery для ссылки на элемент по идентификатору необходимо использовать #

$('myonoffswitch') проверит любое html имя элемента myonoffswitch. Чтобы получить элемент с идентификатором myonoffswitch, вам нужно использовать $('#myonoffswitch')

$('#myonoffswitch').on('click', function () {
    backgroundCount++;
    if (backgroundCount > backgroundImg.length - 1) backgroundCount = 0;
    //Assuming hero is ID of some element
    $('#hero').css('background', 'url(' + backgroundImg[backgroundCount] + ')');
});

Answer 2

Вы должны использовать background-image вместо background, поэтому ваш код должен выглядеть следующим образом:

$('#hero').css('background-image', 'url(' + backgroundImg[backgroundCount] + ')');

Кроме того, вам нужно # при ссылке на идентификатор, поэтому $('myonoffswitch') должно быть $('#myonoffswitch') и $('hero') должно быть $('#hero').