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

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

1 голос
/ 06 октября 2011

все. Я искал этот веб-сайт и многие другие, чтобы понять, почему функция 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. Я изменил код, и теперь все работает нормально.

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

Ответы [ 3 ]

1 голос
/ 18 марта 2016

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

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

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

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

#btn-slide { background: url(oldimage.png) }
#btn-slide.smallbox { background: url(newimage.png) }
0 голосов
/ 06 октября 2011

Ваш метод добавления! Важно правильно.Вы вводите вторую директиву background-image для div, поэтому вам нужно четко указать, какую из них вы хотите использовать, следовательно!либо переключите оба фоновых класса, так что одновременно активен будет только один (не очень хорошее решение, потому что теперь вы должны дублировать все остальные ваши директивы 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");
...