Question

我正在建立一个分类广告网站（如craigslist），其中包含：把手（hbs），nodejs和multer用于上传图片。

我已经创建了自己的CRUD。

用户可以免费发布广告，为每个广告介绍其信息：

用户名
电子邮件
广告标题
广告说明
广告城市
广告类别
广告图片（如果用户需要，可以多于一张）

我有一个视图， list.hbs ，广告在其中显示其信息：

当用户点击广告图片时，它会像模式框一样打开/弹出：

一切都很完美，直到这里。

我通过以下方式将图片保存在ad.model中：

  image: {
      imgName:{
        type:String
      },
      imgPath:{
        type:[String]
      }
  }

如您所见，我将路径的图片以数组形式存储到我的mongodb数据库（由mongoose管理）中。

即：

"image" : {
    "imgPath" : [
        "uploads/e3c97fb10dd4c602054bedce194464b6",
        "uploads/302fe7e147932d2b868a79b1799ba3f9"
    ]
}

问题在这里。我一直试图在单击每张图片后更改图像，但无法做到这一点。

我尝试了通过，但是hbs似乎无法正常工作，并且无法从车把读取变量：

我什至尝试通过onclick = myfunction（{{＃imageHelper}} {{/ imageHelper}}）来传递帮助程序，但这不起作用...

有人知道如何在车把上处理吗？如何在此视图中添加js代码？

注意：我的模式框/弹出框是用纯html / css制成的，里面没有js或jquery。

非常感谢，希望有所帮助！

Answer 1

我不敢相信自己的错误，以前从未注意到过！

如果您遇到此问题，或任何与把手-multer-javascript DOM相关的问题，请不要忘记必须在onclick元素内引用模板变量。

错误/错误

我通过onclick元素传递了这个信息：

 <img onclick="myFun({{ad.reference}},{{ad.image.imgPath}})" class="imgAd" id="{{ad.reference}}" src="{{ad.image.imgPath.[0]}}"/>

要管理src并更改单击图像上各处的图像，我尝试执行以下操作：

...

<script>
  let i = 0;
  //next prev image
  function myFun(ref,str){ 
    const arr = str.split(',');
    const len = arr.length;
    if(i < len - 1){
      i = i + 1;
      document.getElementById(ref).src = arr[i]
    } 
    else {
    i = 0;
    document.getElementById(ref).src = arr[i]

    }
  }
</script>

（上面的脚本，仅用于更改下一张图片，依此类推）

请记住：如果传递这样的变量（不加引号），则js会引发错误，因为它接收到的是“变量”（如参数），而不是字符串。在这种情况下，onclick会收到以下提示：

uploads/b5e01da1707382ed915f314c0c77266c //variable, not string

正确的方法：

<img onclick="myFun('{{ad.reference}}','{{ad.image.imgPath}}')" class="imgAd" id="{{ad.reference}}" display="block" src="{{ad.image.imgPath.[0]}}"/>

我传递了一个字符串，而不是一个变量：

引用每个车把变量后，我以字符串形式传递。

"uploads/b5e01da1707382ed915f314c0c77266c"

现在，脚本将起作用。我得到一个需要转换为数组的字符串才能处理它：

<script>
  let i = 0;
  //next prev image
  function myFun(ref,str){ 
    const arr = str.split(',');
    const len = arr.length;
    if(i < len - 1){
      i = i + 1;
      document.getElementById(ref).src = arr[i]
    } 
    else {
    i = 0;
    document.getElementById(ref).src = arr[i]

    }
  }
</script>

有了这个，我能够管理每个广告中的DOM，并通过单击nodejs，hbs和multer来更改图像。

如何使用multer将图像更改为hbs把手，nodejs中的下一个图像

1 个答案: