悬停的淘汰赛问题答案

【问题标题】：knockout problems with hover悬停的淘汰赛问题
【发布时间】：2017-02-07 18:33:11
【问题描述】：

我正在使用敲除来绑定一些数据。什么工作得很好。但是现在我需要绑定一些数据，当用户将鼠标移过它时，应该会显示一条带有一些信息的消息。

**My CSS:**

.message{
    display:none;
    color:#000;
    background:#999;
    position:absolute;
    top:10px;
}

.mo:hover .message{
    background-color: yellow !important;
    display:block !important;
    z-index:10;
}

我的 html 消息：

function getGrayStatus() {
        return "<a  href='#'>" +
            "<span class='mo' style='background-color:gray; padding-left: 100%;'>" +
            "<p class='message'><b>my message</b></p>" +
            "</span>" +
            "</a>";
}

js绑定代码：

 main.sellers.push(
    {
        sellerCode: "1", totalClientsInRoute: "45", visitedClientsInRoute : "32",
        notVisitedClientsInRout: "2", clientsWithSaleInRoute: "1",
        percentageOfClientsWithSalesInRoute: "15", visitsOutOfPointInRoute: "1",
        totalClientsOutOfRoute: "11", clientsWithSaleOutOfRoute: "15",
        sales: [{ sale: getRedStatus() }, { sale: getGreenStatus() }, { sale: getGrayStatus() }}

在 html 中绑定：

 <div class="dashboard-sellers-table-sales">
     <div class="table-row" data-bind="foreach: sales">
        <div class="table-cell" data-bind="html: sale"></div>
     </div>
 </div>

绑定正在工作。问题是没有显示消息。如果我们在没有敲除的情况下进行测试，则会显示消息。

【问题讨论】：

标签： javascript knockout.js hover mouseover

【解决方案1】：

我不知道您的整个模型的代码如何，但这里是您的 sn-p 代码的一个工作示例。 https://jsfiddle.net/kyr6w2x3/151/

查看：

 <!-- ko foreach: ItemList -->
  <div class="dashboard-sellers-table-sales">
       <div class="table-row" data-bind="foreach: sales">
          <div class="table-cell" data-bind="html: sale"></div>
       </div>
   </div>
  <!-- /ko -->

JS：

var MainViewModel = function(){
  var self = this;
  self.ItemList = ko.observableArray([{
        sellerCode: "1", totalClientsInRoute: "45", visitedClientsInRoute : "32",
        notVisitedClientsInRout: "2", clientsWithSaleInRoute: "1",
        percentageOfClientsWithSalesInRoute: "15", visitsOutOfPointInRoute: "1",
        totalClientsOutOfRoute: "11", clientsWithSaleOutOfRoute: "15",
        sales: [{ sale: getRedStatus() }, { sale: getGreenStatus() }, { sale: getGrayStatus() }]
    }]);
}

var ItemViewModel = function(data){
 var self = this;
   self.sellerCode = data.sellerCode;
   self.totalClientsInRoute = data.totalClientsInRoute;
   self.visitedClientsInRoute = data.visitedClientsInRoute;
   self.notVisitedClientsInRout = data.notVisitedClientsInRout;
   self.clientsWithSaleInRoute = data.clientsWithSaleInRoute;
   self.percentageOfClientsWithSalesInRoute = data.percentageOfClientsWithSalesInRoute;
   self.visitsOutOfPointInRoute = data.visitsOutOfPointInRoute;
   self.totalClientsOutOfRoute = data.totalClientsOutOfRoute;
   self.clientsWithSaleOutOfRoute = data.clientsWithSaleOutOfRoute;
   self.sales = ko.observableArray([]);
    self.sales($.map(data.sales, function (item) {
      return new SalesItemViewModel(item);
    }));
}

var SalesItemViewModel = function(data){
  var self = this;
  self.sale = data.sale;
}
var viewModel = new MainViewModel();
ko.applyBindings(viewModel);

function getGrayStatus() {
        return "<a  href='#'>" +
            "<span class='mo' style='background-color:gray; padding-left: 100%;'>" +
            "<p class='message'><b>my GRAY message</b></p>" +
            "</span>" +
            "</a>";
}
function getRedStatus() {
        return "<a  href='#'>" +
            "<span class='mo-red' style='background-color:red; padding-left: 100%;'>" +
            "<p class='message'><b>my RED message</b></p>" +
            "</span>" +
            "</a>";
}
function getGreenStatus() {
        return "<a  href='#'>" +
            "<span class='mo-green' style='background-color:green; padding-left: 100%;'>" +
            "<p class='message'><b>my GREEN message</b></p>" +
            "</span>" +
            "</a>";
}

【讨论】：