在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和类是id="myImage“，类是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;
 }

联合来文如下：

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

我知道我的JS可能不完整。然而，我的主要问题是关于路由路径--它对wine_glass.jpeg是正确的吗？我从未在rails中更改过图像，但在普通的HTML/CSS文档中做了很多次。在rails中，任何关于如何做到这一点的帮助都将不胜感激。谢谢!如果你需要更多的信息，请告诉我。

基于下面的第一个响应:我已经这样修改了我的代码：

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>

联署材料：

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

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

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

尽管我现在得到了一个不正确的TypeError错误:无法读取属性'addEventListener‘的null。不知道这是什么，但目前正在研究。

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>

​