Question

我可能在这里错过了一些明显的事情，如果是这样，请提前道歉......

使用ajax-solr并实现我自己的当前版本的当前搜索小部件示例/教程 - https://github.com/evolvingweb/ajax-solr/wiki/Reuters-tutorial%3A-step-5我有一个代码片段，如下所示：

(function($) {
   AjaxSolr.CurrentSearchWidget = AjaxSolr.AbstractWidget.extend({
      start: 0,

      afterRequest: function() {
         var self = this;
         var links = [];

         var q = self.manager.store.get('q').val();
         var qText = q;
         if (q != null && q != '*:*') {
            if (q.split(':').length == 2) {
               qText = q.split(':')[1];
            }
            links.push($('<a href="#" class="cur-search"></a>')
                       .text('search: ' + qText + ' (remove)').click(function() {
               localStorage.removeItem("query");
               localStorage.setItem("query", "*");
               self.manager.store.get('q').val('*:*');
               self.doRequest();
               return false;
            }));
         }

         var fq = self.manager.store.values('fq');
         var prettyText = "";
         for (var i = 0, l = fq.length; i < l; i++) {
              //string manipulation for user-facing text
              links.push($('<a href="#" class="cur-search"></a>')
                         .text(prettyText + ' (remove)').click(self.removeFacet(fq[i])));

             //local storage stuff
           }
           if (links.length > 1) {
              links.unshift($('<a href="#" class="cur-search"></a>')
                            .text('remove all').click(function() {
                 localStorage.clear();
                 localStorage.setItem("query", "*");
                 self.manager.store.get('q').val('*');
                 self.manager.store.remove('fq');
                 self.doRequest();
                 return false;
              }));
           }

           //update DOM
        },

我已经删除了不必要的代码，但上述工作正常。但是，如果我改变

links.push($('<a href="#" class="cur-search"></a>')
                             .text(prettyText + ' (remove)')
                             .click(self.removeFacet(fq[i])));

使用上面和下面的例子中的函数，比如

links.push($('<a href="#" class="cur-search"></a>')
                             .text(prettyText + ' (remove)')
                             .click(function () {
   self.removeFacet(fq[i]);
}));

这样我可以在那里添加额外的代码，当点击锚点时它不再运行removeFacet。感谢您对我所缺少的任何帮助！

Answer 1

这似乎是功能范围的问题。这不再指向您的对象。我建议像这样绑定你的“自我”对象。

links.push($('<a href="#" class="cur-search"></a>')
        .text(prettyText + ' (remove)')
        .click(function () {
            var self = this;
            self.removeFacet(fq[i]);
         }).bind(self));

Answer 2

请查看更改此内容是否有效

links.push($('<a href="#" class="cur-search"></a>')
                             .text(prettyText + ' (remove)')
                             .on('click', function () {
   self.removeFacet(fq[i]);
}));

Answer 3

你遇到的问题 - 你有内部函数（匿名点击函数）没有立即执行，因此迭代器“丢失”。以下面的例子为例

var i, colors = ['green', 'blue', 'red'];

for (i = 0; i < colors.length; i++) {
    var color = colors[i];
    setTimeout(function() {
        console.log(color);
    }, i * 1000);
}
// red, red, red

会记录3次红色，因为函数的代码（这里是超时内）是在循环外执行的，迭代器是在它的最后位置。

使用此变体，每次迭代时都会将值捕获到函数的参数中，该函数会创建一个范围，这将产生一个范围输出绿色，蓝色和红色

var i, colors = ['green', 'blue', 'red'];

for (i = 0; i < colors.length; i++) {
    (function(color) {
        setTimeout(function() {
            console.log(color);
        }, i * 1000);
    })(colors[i]);
}
// green, blue, red

在你的情况下，这样的事情应该有效：

links.push($('<a href="#" class="cur-search"></a>')
.text(prettyText + ' (remove)')
.click((function(instance, facet) {
    // your code here
    // and delete
    instance.removeFacet(facet);
})(self, fq[i]));

Answer 4

使用 on 功能总是更好。尝试这样的事情......

$(window, "a.cur-search", function () {
        var self = this;
        self.removeFacet(fq[i]);
     });

您可能需要将fq [i]放入数据或其他内容才能使其可用。

使用Jquery点击功能，在某些地方执行代码，但在其他地方执行代码

4 个答案: