Jquery - toggleClass, не меняющий фоновое изображение

Question

Каждый. Я искал этот веб-сайт и многие другие, чтобы понять, почему функция toggleClass не работает в моем коде Jquery, и хотя я нашел несколько разных объяснений, они не соответствовали тому, что я хочу, чтобы мой эффект делал.

Я очень плохо знаком с Jquery и поэтому не уверен в функциях Jquery. Вот мой код Jquery:

$("document").ready(function(){
   $("div#btn-slide").click(function(){
      $("div#panel").slideToggle("slow");
      $("div#btn-slide").toggleClass("smallbox");
   });
});

Вот мой HTML-код.

<div id="panel">
</div>

<div id="btn-slide">
</div>

Эффект, который я ищу здесь, очень прост. При нажатии на меньший элемент div (btn-slide) больший элемент div (панель), который находится над меньшим элементом div, будет подниматься на экран браузера до тех пор, пока полностью не будет скрыт, поэтому я использую slideToggle("медленно").) функция.

Затем последнее, что я хочу сделать, это чтобы меньший div (btn-slide) изменил свое фоновое изображение. Вот почему я использую toggleClass("smallbox"). Класс smallbox находится в моем CSS-файле и имеет фоновое изображение стрелки, указывающей вниз. Это изображение, которое я хочу показать в моем меньшем элементе div (btn-slide), когда больший элемент div (панель) сместился на свое скрытое место.

Единственный способ заставить это работать - это зайти в мой CSS-файл и поместить! Важный в конец background-image класса CSS "smallbox", но я хочу знать правильную технику Jquery для этого эффекта.,

ПРИМЕЧАНИЕ. Я хочу иметь возможность щелкать меньший элемент div (btn-slide) и каждый раз, когда я щелкаю по нему, фоновое изображение меняется на соответствующую стрелку.

Как мне добиться этого эффекта?

Спасибо!

ОБНОВЛЕНИЕ: Я очень благодарен за все ваши ответы. Хорошо, все ваши ответы заставили меня задуматься, и поэтому я еще раз просмотрел функцию toggleClass и считаю, что теперь код работает правильно. Вот мой код CSS.

#PANEL {
        width: 240px;
        height: 320px;
        background-color: #000000;
        margin: 0px auto;
    }

    #BUTTON {
        width: 100px;
        height: 50px;
        background-image:url(Arrow_Up.jpg);
        background-repeat: no-repeat;
        margin: 0px auto;
    }

    #BUTTON.GoUp {
        background-image:url(Arrow_Down.jpg);
    }

Теперь, по-видимому, моя ошибка заключалась в том, что я сам добавлял класс.GoUp с назначенным фоновым изображением вместо добавления нового класса в #BUTTON. Я изменил код, и теперь все работает нормально.

Еще раз всем спасибо за ваши быстрые ответы!

Answer 1

Проблема в том, что когда ваш CSS загружен, DOM загружает только Arrow_Up.jpg образ. Это не загружает Arrow_Down.jpg, CSS не может динамически загружать изображения.

Возможные решения:

• Используйте JS для загрузки изображений на лету (см. Этот SO ответ)
• Убедитесь, что изображение загружается при загрузке страницы, поместив Arrow_Down.jpg изображение на фоне другого элемента и скрыть его с помощью display: none, Затем вы можете использовать JS для добавления и удаления класса. Codepen

Answer 2

Ваш метод добавления! Важно правильно. Вы вводите вторую директиву background-image для div, поэтому вам нужно четко указать, какую из них вы хотите использовать, следовательно, важно!

Если вам действительно нужно чистое решение jQuery, вы можете либо переключить оба фоновых класса, так что одновременно активен только один (не очень хорошее решение, потому что теперь вам нужно дублировать все остальные директивы css в оба класса, что всегда плохой знак)

Или вы можете использовать функцию css для переключения фона, что-то вроде;

if($("div#btn-slide").css("background-image") == "uparrow.jpg") {
   $("div#btn-slide").css("background-image", "downarrow.jpg");
}
else $("div#btn-slide").css("background-image", "uparrow.jpg");

Answer 3

Можете ли вы опубликовать свой CSS? На самом деле вам не нужно использовать! Important, НО вам нужно убедиться, что селектор класса 'smallbox' более специфичен, чем идентификатор 'btn-slide'. Например, в вашем файле CSS:

#btn-slide { background: url(oldimage.png) }
#btn-slide.smallbox { background: url(newimage.png) }