Javascript 切换背景图像MVC

我有下面的css定义来加载背景图像

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

---

背景图像现在显示在每个页面上。但是，对于不同的应用程序，我们希望在“image1.png”和“image2.png”之间切换。有没有一种简单的方法可以通过添加一些JavaScript代码和

\u layout.cshtml

文件中的按钮来切换图像？

下面是一种使用jQuery切换背景图像的方法。我只是将其连接到一个HTML锚标记，并将其onclick处理程序设置为该函数。“imageId”是我页面上img元素的id

JAVASCRIPT

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

或按客户（psuedo）

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>

---

用一种简单的方式，在css中为body创建两个类，并将不同的图像路径放在其中

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

---

然后，您可以通过替换javascript中的class in body元素来更改背景图像。

对于不同的应用程序，在image1和Image2之间切换是什么意思？如果app1显示image1？如果是app2，是否显示image2？或者你真的想让用户点击一个按钮来切换图像吗？我们尝试为不同的客户提供一个演示。在客户到来之前，我们希望向特定客户显示特定的图像。它可以是一个按钮或其他机制。为每个选项添加一个带有CSS的类，并更改这些元素上的类。您可以在每个页面中创建两个单独的页面，其中包含您想要显示的图像，然后导航到包含您想要显示的图像的url，或者您可以为每个图像创建两个类，一个类，然后在运行之前在html中切换类…等等。我不能使用两个页面，因为该页面是我的IdentityServer4登录页面。我正在考虑用java脚本代码和逻辑开关语句来放置图像url。

$（document）.ready（函数（）{var el=document.getElementById（“button1”）；if（el）{addEventListener（“click”，switchImage1（）；}var el2=document.getElementById（“button2”）；if（el2）{addEventListener（“click”，switchImage2（））;   	}   });   函数switchImage1（）{$（'body，html'）.css（'background-image'，'url（'../images/image1.png'））；}函数switchImage2（）{$（'body，html'）.css（'background-image'，'url（'../images/image2.png'））；}

我试图格式化上述代码，但超时。我添加了两个按钮：“button1”和“button2”。我单击时，它们似乎不起作用。它仅在AddEventListener运行时起作用。它以“image2”作为背景图像。看起来您正在为每个客户计划一个按钮，对吗？如果是这样的话，我建议只使用我在答案中描述的内容，并使用函数获取客户信息（id和图像url）。通过使用$（document）.ready，您已经在使用jQuery了……在我看来，只要从按钮发送参数，并考虑到您的概念验证用例，使函数保持小而简洁，就没有什么害处了。我将更新答案以显示我的意思。chrome不允许在元素中直接“onClick”。这就是我使用“addEventListener”的原因。但是，我不能让它工作。它是什么类型的元素？Chrome允许在锚标记上发生onclick事件。刚刚在按钮元件上测试过……这在chrome上也可以使用。

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