淘汰赛js隐藏图像div答案

【问题标题】：Knockout js hide image div淘汰赛js隐藏图像div
【发布时间】：2017-09-25 00:06:32
【问题描述】：

我有Div binding 图像标签，它正在工作，但是当图像值为空时。

我想隐藏整个 div，但是当图像值为空时，我得到空白的白色边框框，我还需要删除它。如何使用 knockout js 存档它

<ul  id="user-listview" data-bind="foreach:dataItems">
   <li>
       <div>
         <span data-bind="text:UserID"  ></span>
          <span data-bind="text:UserName" ></span>
           <span data-bind="text:mobilenumber"></span>
         </div>
      <div id="divuserImage">
         <span data-bind="text:ImageID" style="display:none"></span>
         <img style="height: 200px;width: 300px;margin-top: 10px;" data-bind="attr: { src:userImageUrl }" />
     </div>
  </li>
</ul>

function UserModel(data){
    self=this;
    self.UserID=ko.observable(data.UserID)
    self.UserName=ko.observable(data.UserName)
    self.mobilenumber=ko.observable(data.mobilenumber)
    self.userImageUrl=ko.observable(data.userimage)
    self.ImageID=ko.observable(data.ImageID)
}

【问题讨论】：

标签： javascript jquery html css knockout.js

【解决方案1】：

如果你还没有，试试这个

<ul  id="user-listview" data-bind="foreach:dataItems">
    <li>
        <div>
            <span data-bind="text:UserID"  ></span>
            <span data-bind="text:UserName" ></span>
            <span data-bind="text:mobilenumber"></span>
        </div>
        <div id="divuserImage" data-bind="visible: userImageUrl() && userImageUrl() != ' '">
            <span data-bind="text:ImageID" style="display:none"></span>
            <img style="height: 200px;width: 300px;margin-top: 10px;" data-bind="attr: { src:userImageUrl }" />
        </div>
    </li>
</ul>

我只在 div 标签中添加了 data-bind="visible: userImageUrl()"

在您的 js 模型中，您还需要一个 self.ImageID 属性（或者如果您以其他方式将其添加到 dataItems 中的每个元素）。例如：

function UserModel(data){
    self=this;
    self.UserID=ko.observable(data.UserID)
    self.UserName=ko.observable(data.UserName)
    self.mobilenumber=ko.observable(data.mobilenumber)
    self.userImageUrl=ko.observable(data.userimage)
    self.ImageID=ko.observable(data.ImageID)
}

【讨论】：

我试过了，对我没用，如果值为空，它也会采用宽度和高度的空白白色边框
问题中的代码是该 div 的所有代码还是您正在执行其他操作来操作该 div？
它在foreach循环列表中的绑定，每个列表值将有不同的图像，如果图像有值它应该显示否则它应该隐藏整个“divuserImage”
你的 HTML 看起来像编辑过的问题吗？您能否向我们展示一下包括 foreach 在内的外观？
哦，顺便说一下，每个列表值是否也包含一个 ImageID 属性（在函数 UserModel 中）？否则，淘汰赛绑定将崩溃，然后您可能会看到一个空白的边框

【解决方案2】：

您可以使用 CSS 来执行此操作。提供如果 src 中没有任何内容 if null 您可以简单地使用：

#divuserImage img[src=""] {
    display: none;
}

【讨论】：

@kittysarvaj src 中有什么？
src =" " 但我将图像绑定在列表中