Question

好的，我所追求的非常简单。我有多个无线电组集的点击处理程序。在处理程序内部我将一些参数传递给函数参数引用相对于组集但它们的路径是相同的。所以我基本上有：

$(document).ready(function(){
    $("input[name='radioGroup1']").click(function(){        
        updateWalletInfo(
            $(this).val(),
            $(this).parent().parent().find(".cSec .f_class a").text(),
            $(this).parent().parent().parent().find(".cSec .flight-time").text(),
            $(this).parent().parent().parent().find(".cSec .city").text(),
        );
    });

    $("input[name='radioGroup2']").click(function(){        
        updateWalletInfo(
            $(this).val(),
            $(this).parent().parent().find(".cSec .f_class a").text(),
            $(this).parent().parent().parent().find(".cSec .flight-time").text(),
            $(this).parent().parent().parent().find(".cSec .city").text(),
        );
    });
});

我想要做的是保存对$(document).ready()下的特定项目的引用，所以如果我改变路径，我就不必在每个处理程序中更改它。就像我追求的那样：

   $(document).ready(function(){
        var value = $(this).val();
        var f_class = $(this).parent().parent().find(".cSec .f_class a").text();
        var f_time =$(this).parent().parent().parent().find(".cSec .flight-time").text();
        var f_city = $(this).parent().parent().parent().find(".cSec .city").text();

        $("input[name='radioGroup1']").click(function(){        
            updateWalletInfo(value,f_class,f_time,f_city);
        });

        $("input[name='radioGroup2']").click(function(){        
            updateWalletInfo(value,f_class,f_time,f_city);
        });
    });

我知道这个操作符不会在那里工作，但我认为这使我的观点更清楚。如果我只能删除.parent().parent().find(".cSec .????").text()位的冗余，我甚至很高兴。

Answer 1

您可以将parent().parent().替换为closest().。

还将对jQuery元素的引用传递给updateWalletInfo函数，并获取该函数内的所有值，而不是传递所有值。像

这样的东西

$(document).ready(function(){
    $("input[name='radioGroup1']").click(function(){        
        updateWalletInfo($(this));
    });

    $("input[name='radioGroup2']").click(function(){        
        updateWalletInfo($(this));
        );
    });

    function updateWalletInfo(elem)
    {
        var value = elem.val();
        var f_class = elem.closest("selector").find(".cSec .f_class a").text();
        var f_time = elem.closest("selector").find(".cSec .flight-time").text();
        var f_city = elem.closest("selector").find(".cSec .city").text();
    }
});

如果您从同一个父元素中获取所有值，则可以使用

var parentElem = elem.closest("selector");
var f_class = parentElem.find(".cSec .f_class a").text();
var f_time = parentElem.find(".cSec .flight-time").text();
var f_city = parentElem.find(".cSec .city").text();

Answer 2

您可以注册一个即兴的jQuery插件函数。

$.fn.registerMyClick = function() {
  $(this).each(function() {
    var $this = $(this);
    $this.click(function() {
      updateWalletInfo(
        $this.val(),
        $this.parent().parent().find(".cSec .f_class a").text(),
        $this.parent().parent().parent().find(".cSec .flight-time").text(),
        $this.parent().parent().parent().find(".cSec .city").text(),
      );
    });
  });

  return this;
}

根据您的HTML，它也可以简化为：

$.fn.registerMyClick = function() {
  $(this).each(function() {
    var $this = $(this);
    $this.click(function() {
      $parent = $this.closest('.cSec');
      updateWalletInfo(
        $this.val(),
        $(".f_class a", $parent).text(),
        $(".flight-time, $parent").text(),
        $(".city", $parent).text(),
      );
    });
  });

  return this;
}

然后你就这样使用它：

$("input[name='radioGroup1']").registerMyClick();
$("input[name='radioGroup2']").registerMyClick();

保存对特定选择器的引用

2 个答案: