javascript - 鼠标悬停事件影响列表中所有行中的按钮，而不仅仅是特定按钮

Question

我有一些带有下拉列表的集合，每行旁边都有常规的“删除”。我添加了一个鼠标悬停事件，将“删除”按钮的文本从“X”更改为“删除”。问题是所有按钮的文本都会发生变化，而不仅仅是特定按钮的文本。

JSFiddle: http://jsfiddle.net/z22m1798/27/

Javascript:

     var CartLine = function(siblings) {
   var self = this;

   self.availableFilters = ko.computed(function() {
        return filters.filter(function(filter) {
        return !siblings()
            .filter(function(cartLine) { return cartLine !== self })
            .some(function(cartLine) {
            var currentFilterValue = cartLine.filterValue();
            return currentFilterValue &&
              currentFilterValue.name === filter.name;
          });
      });
   });

   self.filterValue = ko.observable();
 };



 var Cart = function() {
   // Stores an array of filters
   var self = this;

    self.btnRemoveTxt = ko.observable("X"); 
   self.lines = ko.observableArray([]); 
   self.lines.push(new CartLine(self.lines))// Put one line in by default

     self.sortedLines = ko.computed(function() {
    return self.lines().sort(function(lineA, lineB) {
        if (lineA.filterValue() && lineA.filterValue().name == "Text") return -1;
      if (lineB.filterValue() && lineB.filterValue().name == "Text") return 1;
      return 0;
    });

   });

   // Operations
   self.addFilter = function() {
     self.lines.push(new CartLine(self.lines))
   };

   self.removeFilter = function(line) {
     self.lines.remove(line)
   }; 

   self.btnRemoveOver = function() {
        console.log("Yey");///////////////
        self.btnRemoveTxt("Remove");
    }
    self.btnRemoveOut = function() {
        console.log("Yey");///////////////
        self.btnRemoveTxt("X");
    }
 };

 // Some of the Knockout examples use this data
 var filters = [{ 
     "filterValues": [{"name": "", }, ], "name": "Text" }, {
   "filterValues": [{"name": "Yes",}, {"name": "No",  }, ],"name": "Choice1" }, {
   "filterValues": [{"name": "Yes",}, {"name": "No", }, ], "name": "Choice2" }];

 //Load initial data from server
 var JSONdataFromServer =  $("#JSONdataFromServer").val();
 console.log(JSONdataFromServer);
    var dataFromServer = ko.utils.parseJson(JSONdataFromServer);

ko.applyBindings(new Cart());

HTML:

<div class='liveExample'>
<input type="hidden" id="JSONdataFromServer" value='[{ "filterValues": [{"name": "Test"}], "name": "Text" }, { "filterValues": [{"name": "Yes"}, {"name": "No"}], "name": "Choice2" }]'/> 
  <table width='100%'>
    <tbody data-bind='foreach: sortedLines'>
      <tr>
        <td>
          Choose option:
        </td>
        <td>
          <select data-bind='options: availableFilters, optionsText: "name", value: filterValue'> </select>
        </td>
        <td data-bind="with: filterValue">
          <!-- ko if: name === "Text" -->
          <input type="text">
          <!-- /ko -->
          <!-- ko ifnot: name === "Text" -->
          <select data-bind='options: filterValues, optionsText: "name", value: "name"'> </select>          
          <!-- /ko -->

        <td>
<button class="widthFull buttonInput" href='#' data-bind='click: $parent.removeFilter, visible: $parent.lines().length > 1, event: { mouseover: $parent.btnRemoveOver, mouseout: $parent.btnRemoveOut }'><span data-bind="text: $parent.btnRemoveTxt"></span></button>
        </td>
      </tr>
    </tbody>
  </table>
  <button data-bind='click: addFilter'>Add Choice</button>
  <br>
  <input type="submit"Submit</>
</div>

有人可以帮助我吗？我是 Knockout.js 的新手。

提前致谢!

Answer 1

您的btnRemoveText是共享属性(位于$parent中)。如果您希望它按您的预期工作，您需要将其添加到每个 CartLine 中。

但是，我建议仅使用 css 来实现此功能:

.buttonInput::after {
  content: "X";
}

.buttonInput:hover::after {
  content: "remove";
}

使用更简单的 html:

<button class="widthFull buttonInput" href='#' data-bind='
  click: $parent.removeFilter, 
  visible: $parent.lines().length > 1'>
</button>

http://jsfiddle.net/8z3agfwc/

完整说明:如果您确实想要将功能移至 CartLine View 模型:

html:

<button class="widthFull buttonInput" href='#' data-bind='
  click: $parent.removeFilter, 
  visible: $parent.lines().length > 1, 
  event: { 
    mouseover: btnRemoveOver, 
    mouseout: btnRemoveOut 
  }'>

  <span data-bind="text: btnRemoveTxt"></span>

</button>

js:

var CartLine = function(siblings) {
  var self = this;

  self.btnRemoveTxt = ko.observable("X");

  self.btnRemoveOver = function() {
    self.btnRemoveTxt("Remove");
  };

  self.btnRemoveOut = function() {
    self.btnRemoveTxt("X");
  };

  // etc.
};

http://jsfiddle.net/t4ys35st/