Используйте атрибут данных в HTML для изображения вместо редактирования JavaScript

Question

Используйте атрибут данных в HTML для изображения вместо редактирования JavaScript

Здесь это решение Scala:

(for (i <- 0 until rnd.nextInt(64)) yield { 
  ('0' + rnd.nextInt(64)).asInstanceOf[Char] 
}) mkString("")

0

javascript jquery twitter-bootstrap

задан Jamdev 16 January 2019 в 12:55

2 ответа

Другие вопросы по тегам:

javascript jquery twitter-bootstrap

Похожие вопросы:

score 0 · Answer 1

Добавьте атрибут data-sticky к элементу изображения. Это будет значение, которое будет обновляться на изображении, когда вы решите применить его.
Первоначально сохранить значение src изображения по умолчанию для обращения.
Toggle .sticky class & amp; image src on scroll

Итак, ваше изображение будет выглядеть так:

<img src="assets/images/logo.png" alt="" data-sticky="assets/images/logo-sticky.png" />

И ваш JS:

// Initially set the original src
var navbarImg = $('.navbar-brand > img')
navbarImg.data('original', navbarImg.attr('src'))

// Update on scroll
$(window).scroll(function() {
    var stickyNav = $('.sticky-navbar');
    var isSticky = $(this).scrollTop() > 50;
    stickyNav.toggleClass('sticky', isSticky);
    navbarImg.attr('src', navbarImg.data(isSticky ? 'sticky' : 'original'));
});

score 0 · Answer 2

Насколько я понимаю, вы хотите переключать логотип изображения на основе высоты прокрутки: вы можете хранить ссылки в атрибутах данных, таких как:

<img src="" alt="" data-logo="assets/images/logo.png" data-sticky="assets/images/logo-sticky.png">

и переключать значение атрибута src с помощью JQuery:

[ 111]

, чтобы добавить логотип в src при загрузке страницы:

$(document).ready(function(){
    $('.navbar-brand img').attr('src',$('.navbar-brand img').data('logo'));
});

jsfiddle демо .

Надеюсь, что помогает:)