$(this)在函数之间共享。

huangapple go评论63阅读模式
英文:

jquery share $(this) between functions

问题

我尝试将每个处理程序中的这些代码行提取到一个名为 handlerShared() 的函数中。代码如下:

function handlerShared() {
    var $this = $(this);
    var dataKey = $this.attr("data-key");
    pushHistory(dataKey);
    removeActiveClass();
    hideContent();
}

function handlerTabs() {
    handlerShared();
    $(this).addClass(activeClass);
    var activeTab = $(this).attr('href');
    $(activeTab).fadeIn();
    return false;
}

function handlerDiagram() {
    handlerShared();
    scrollToTabs();
    $(themeTab + "." + dataKey).addClass(activeClass);
    var activeSVGTab = $(themeContent + "." + dataKey);
    $(activeSVGTab).fadeIn();
    return false;
}

$(themeTab).on("click", handlerTabs);
$(themeDiagram).on("click", handlerDiagram);

这样,您可以在 handlerTabshandlerDiagram 中调用 handlerShared() 来共享相同的代码行,同时保持 $(this) 的上下文。

英文:

I have two click events that are almost identical, I am trying to refactor to make it more DRY. I want share some lines of code in a handlerShared() function - but I loose the context of $(this) which should be the DOM element that is clicked. There are two different elements an svg and button. They have some specific functionality but alot of it is the same. I guess what I want is a way to make $(this) select the specific DOM element.

	function handelerShared() {
		
	}

	function handlerTabs() {
		var $this = $(this)
		var dataKey = $this.attr("data-key");
		pushHistory(dataKey);
		removeActiveClass();
		hideContent();
        $(this).addClass(activeClass);
        var activeTab = $(this).attr('href');
        $(activeTab).fadeIn();
        return false;
	}

	function handlerDiagram() {
		var $this = $(this)
		var dataKey = $this.attr("data-key")
		pushHistory(dataKey);
        removeActiveClass();
		hideContent();
		scrollToTabs();
        $(themeTab + "." + dataKey).addClass(activeClass);
        var activeSVGTab =  $(themeContent + "." + dataKey)
        $(activeSVGTab).fadeIn();
        return false;
	}

I m try to take these lines of of each handler and out into a handlerShared()

        var $this = $(this)
		var dataKey = $this.attr("data-key");
		pushHistory(dataKey);
		removeActiveClass();
		hideContent();

the clicks

$(themeTab).on( "click", handlerTabs );
$(themeDiagram).on( "click", handlerDiagram );

答案1

得分: 0

我相信你可以简单地传递这个元素

function handlerShared(element) {
  var $this = $(element);
  var dataKey = $this.attr("data-key");
  pushHistory(dataKey);
  removeActiveClass();
  hideContent();
}

function handlerTabs() {
  handlerShared(this);
  $(this).addClass(activeClass);
  var activeTab = $(this).attr('href');
  $(activeTab).fadeIn();
  return false;
}

function handlerDiagram() {
  handlerShared(this);
  scrollToTabs();
  $(themeTab + "." + dataKey).addClass(activeClass);
  var activeSVGTab =  $(themeContent + "." + dataKey)
  $(activeSVGTab).fadeIn();
  return false;
}

$(themeTab).on("click", handlerTabs);
$(themeDiagram).on("click", handlerDiagram);
英文:

I believe you can just pass the element around:

function handlerShared(element) {
  var $this = $(element);
  var dataKey = $this.attr("data-key");
  pushHistory(dataKey);
  removeActiveClass();
  hideContent();
}

function handlerTabs() {
  handlerShared(this);
  $(this).addClass(activeClass);
  var activeTab = $(this).attr('href');
  $(activeTab).fadeIn();
  return false;
}

function handlerDiagram() {
  handlerShared(this);
  scrollToTabs();
  $(themeTab + "." + dataKey).addClass(activeClass);
  var activeSVGTab =  $(themeContent + "." + dataKey)
  $(activeSVGTab).fadeIn();
  return false;
}

$(themeTab).on("click", handlerTabs);
$(themeDiagram).on("click", handlerDiagram);

huangapple
  • 本文由 发表于 2023年2月14日 22:01:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/75448927.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定