Как изменить изображения с помощью JavaScript?

У меня есть аккордеон, который работает, и только одно изображение за раз может быть открыто. Стрелка начинается с вниз, но если вы нажмете на нее, значок изменится вверх. Я пытался сделать это с изображениями, потому что мне не нравятся возможные значки. Дело в том, что мой JavaScript работал на значки, но, пытаясь, я не понимаю, как использовать его с изображениями. Я попробовал два моих изображения, которые появились. flip-up и flip-down.Как изменить изображения с помощью JavaScript?

Мой JQuery

jQuery(document).ready(function() { 
    $(".flip").click(function() { 
     $(".panel").not($(this).next(".panel").slideToggle("slow")).slideUp("slow"); 
     if($("i",this).hasClass('fa-chevron-circle-down')){ 
      $(".fa-chevron-circle-up").removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down"); 
      $("i",this).removeClass("fa-chevron-circle-down").addClass("fa-chevron-circle-up"); 
     } 
     else{ 
      $("i",this).removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down"); 
     } 
    }); 
});

и HTML

<div class="flip shadow-box col-xs-12 col-md-12 col-sm-12 arrow-icon-geschaeftsfelder"> 
    <i class="fa fa-chevron-circle-down"></i> 
</div>

источник

2015-08-04 Bono

Вы пробовали '.attr ('src', 'your-image-here.png')' на вашем элементе изображения? – rybo111

@ rybo111 не является элементом изображения, является шрифтом, удивительным значком (с шрифтами) –

Если вы хотите заменить стрелки, почему бы не изменить класс шрифта удивительные значки? Вместо использования 'fa-chevron-circle-down', используйте другой класс для любого глификона, который вы хотите использовать. Кроме того, вы определяете свои собственные глифы для значка и используете собственный класс (или настраиваемые классы, которые вы переключаете между ними). – Terry

Вы можете сделать это с JavaScript (заменяющего fa элементы с тега изображения), или вы можете обойти и переопределить с чистым CSS:

.fa.fa-chevron-circle-down { 
     content: ""; 
     background: url(assets/img/down.png) center center no-repeat; 
    } 
    .fa.fa-chevron-circle-up { 
     content: ""; 
     background: url(assets/img/up.png) center center no-repeat; 
    }

Будьте осторожны с размерами изображений. fa элементы имеют размер в зависимости от размера шрифта. Вы можете указать ширину и высоту в css, чтобы избежать проблем.

Примечание: это решение без изменения вашего javascript-кода.

источник

2015-08-04 12:11:48

Как изменить изображения с помощью JavaScript?

ответ

Смежные вопросы