Переключение фоновых изображений MVC

user3097695 спросил: 12 мая 2018 в 04:47 в: javascript

У меня есть следующее определение css для загрузки фонового изображения.

body, html {
background-repeat: no-repeat;
background-image: url("../images/image1.png");
background-size: 100%;
}

Фоновое изображение теперь отображается на каждой странице. Однако мы хотим переключиться между "image1.png" и "image2.png" для разных приложений. Есть ли простой способ переключить изображения, добавив код JavaScript и кнопку в файле _layout.cshtml?

2 ответа

Есть решение
user1011627 ответил: 12 мая 2018 в 07:16

Вот способ использования jQuery для переключения фонового изображения. Я просто связал это с тегом привязки HTML и установил его обработчик onclick для этой функции. "imageId" - это идентификатор элемента img на моей странице.

JAVASCRIPT

function switchImage() {
   $('#imageId').css('background-image', "url('imageToReplace.png')");
}

или клиентом (psuedo)

function switchImage(customerImageUrl) {
    $('#imageId').css('background-image', "url('+ customerImageUrl +')");
}

HTML

 <a href="#" onclick="switchImage()">Switch</a>

или клиентом

 <a href="#" onclick="switchImage('customer1.png')">Switch to Customer 1</a>
 <a href="#" onclick="switchImage('customer2.png')">Switch to Customer 2</a>
user3097695 ответил: 12 мая 2018 в 06:50
$(document).ready(function () { var el = document.getElementById("button1"); if (el) { addEventListener("click", switchImage1()); } var el2 = document.getElementById("button2"); if (el2) { addEventListener("click", switchImage2()); } }); function switchImage1() { $('body, html').css('background-image', "url ('../images/image1.png')"); } function switchImage2() { $('body, html').css('background-image', "url ('../images/image2.png')"); }
user3097695 ответил: 12 мая 2018 в 06:58
Я пытаюсь форматировать код выше и время ожидания. Я добавил две кнопки: "button1" и "button2". Кажется, они не работают, когда я щелкнул. Он работает только при запуске addEventListerner. Это изображение "image2" в качестве фонового изображения.
user1011627 ответил: 12 мая 2018 в 07:12
Похоже, вы планируете кнопку для каждого клиента, правильно? Если это так, я бы порекомендовал просто иметь то, что я описал в ответе, и использовать функцию для информации о клиенте (идентификатор и URL-адрес изображения). При использовании $ (document) .ready вы уже используете jQuery в любом случае ... никакого вреда в моем сознании, просто отправляя ваши параметры с кнопки и сохраняя функцию небольшой и лаконичной, учитывая ваше доказательство использования концепции. Я обновлю ответ, чтобы показать, что я имею в виду.
user3097695 ответил: 12 мая 2018 в 08:22
хром не позволяет прямо "onClick" в элементе. Вот почему я использовал "addEventListener". Однако я не могу заставить его работать.
user1011627 ответил: 12 мая 2018 в 08:27
Что это за элемент? Chrome позволяет событиях onclick на тегах привязки. Просто протестировал его на элемент кнопки также .... это также работает в хроме.
Yas Ikeda ответил: 12 мая 2018 в 05:11

Простым образом создайте два класса для тела в css и поместите туда другой путь изображения.

body.background1 {
  background-image: url("../images/image1.png");
}
body.background2 {
  background-image: url("../images/image2.png");
}

, а затем вы можете изменить фоновое изображение, просто заменив класс в элементе body в javascript.