javascript - 在 rails 4.0 上使用 javascript 更改图像

Question

我目前正在研究如何使用 Javascript 在 Rails 上更改背景图像。我基本上有两个小图像，它们被设置为小背景图像，这样我就可以在它们上面写字。代码如下所示:

HTML:

<div class="container">
 <div class="row">
  <div id="myImage" onclick="changeImage()" class="col-md-6 row-1 pic_1">
   <div class="c-imageBlock_content">
     <h2>Test</h3>
   </div>
 </div>
</div>

这里主要关注的ID和Class是id="myImage"，class是pic_1。

CSS:

.pic_1 {
 background-image: image-url("rice_shrimp.jpeg");
 background-size: 100% 100%;
 border-radius: 15px;
 margin-left: 100px;
 width: 450px;
 height: 400px;
 }

JS 如下:

function changeImage() {
var image = document
.getElementById('myImage').style.backgroundImage="url(wine_glass.jpeg)"
 }

我知道我的 JS 可能不完整。但是，我的主要问题是关于路由路径的——仅 wine_glass.jpeg 是否正确？我从来没有在 Rails 中更改过图像，但在普通的 HTML/CSS 文档中做过很多次。任何有关如何在 Rails 中执行此操作的帮助，将不胜感激。谢谢你!如果您需要发布更多信息，请告诉我。

基于以下第一 react : 我以这种方式修改了我的代码:

CSS:

.background-1 {
background-image: image-url("rice_shrimp.jpeg");
background-size: 100% 100%;
border-radius: 15px;
margin-left: 100px;
width: 450px;
height: 400px;

.background-2 {
 background-image: image-url("wine_glass.jpeg");
 background-size: 100% 100%;
 border-radius: 15px;
 margin-left: 100px;
 width: 450px;
 height: 400px;
 }

HTML:

 <div class="container">
  <div class="row">
   <div id="MyImage" class="col-md-6 row-1 background-1">
    <div class="c-imageBlock_content">
     <h2>Test</h3>
    </div>
   </div>
  <div id="MyImage" class="col-md-6 row-1 background-2">
  <div class="c-imageBlock_content">
    <h2>Test</h3>
  </div>
</div>

JS:

 (function() {
 var myImageEl = document.getElementById('MyImage');
 var background2Enabled = false;

 function toggleBackground() {
background2Enabled = !background2Enabled;
myImageEl.className = background2Enabled ? 'background-2' : 'background-1';
}

 myImageEl.addEventListener('click', toggleBackground);
})();

尽管我现在收到 Uncaught TypeError 错误:无法读取 null 的属性“addEventListener”。不确定这是什么，但目前正在研究它。

Answer 1

使用类而不是样式。原因是 url() 路径是相对于样式表的。因此，如果您将更改放在 CSS 中，那么您就不必担心相对路径。它还具有更高的性能和可维护性。

此外，您可能希望避免使用 onclick="" 属性。当您使用它们时，它们的逻辑会隐藏在标记中，如果您这样做，您将很难扩展/重构您的代码。它还被解释为一个字符串，需要浏览器进行单独的 JIT 编译才能运行。它也不能被缩小或静态分析。

(function() {
  var myImageEl = document.getElementById('MyImage');
  var background2Enabled = false;
  
  function toggleBackground() {
    background2Enabled = !background2Enabled;
    myImageEl.className = background2Enabled ? 'background-2' : 'background-1';
  }
  
  myImageEl.addEventListener('click', toggleBackground);
})();

.background-1 {
  background-image: url('background-image-1.jpeg');
  color: red;
}

.background-2 {
  background-image: url('background-image-2.jpeg');
  color: green;
}

<div id="MyImage" class="background-1">
  <p>foobar</p>
</div>