Переключение фоновых изображений 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?

javascript css asp.net-mvc

Ryan Wilson ответил: 12 мая 2018 в 04:49

Что вы подразумеваете под переключением между image1 и изображением 2 для разных приложений? Если app1 отображает изображение1? if app2, отображать изображение2? Или вы действительно хотите, чтобы кнопка нажала на пользователя, чтобы просмотреть изображения?

user3097695 ответил: 12 мая 2018 в 04:51

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

Mark Schultheiss ответил: 12 мая 2018 в 04:54

Добавьте класс с CSS для каждого параметра и, возможно, измените класс на эти элементы?

Ryan Wilson ответил: 12 мая 2018 в 04:55

Вы можете создать две отдельные страницы с изображением, которое вы хотите на каждой странице, а затем просто перейти к URL-адресу с изображением, которое хотите показать, или создать два класса по одному для каждого изображения, а затем переключить свой класс в html перед его запуском ...и т.д.

user3097695 ответил: 12 мая 2018 в 04:59

Я не могу использовать две страницы, потому что страница - это моя страница входа в IdentityServer4. Я собираюсь поместить URL-адрес изображения в код Java-скрипта с помощью оператора логического переключения.

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.