保存对特定选择器的引用答案

【问题标题】：Save a reference to a particular selector保存对特定选择器的引用
【发布时间】：2010-03-01 15:25:05
【问题描述】：

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

$(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);
        });
    });

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

【问题讨论】：

标签： jquery reference jquery-selectors

【解决方案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();

【讨论】：

谢谢 rahul，明天我会试一试，但只是快速问：“选择器”应该按字面书写还是我必须弄清楚它是哪个选择器？干杯
"selector" 只是一个占位符。
您必须识别选择器。

【解决方案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();

【讨论】：