Сохранить ссылку на определенный селектор

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

Вы можете зарегистрировать импровизированную функцию плагина 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();

Answer 2

Вы можете заменить 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();