如何使用类之类的东西将点击代码移动到一个地方.各种 html 标记处的重复代码

How to move onclick code to one place using something like class. Repeated code at various html tags

本文关键字：html 各种 一个 代码 何使用 代码移动      更新时间：2023-09-26
onclick="triggersTracking($(this).attr('a'),$(this).attr('b'),$(this).attr('c'),Enum.BtnSellerView)"

我在各种 HTML 标签/按钮上有这一行。我想将此代码移动到一个地方以获得更好的可维护性。问题在于我传递的第三个/最后一个属性，因为它的 Ennum，它从不同的标签元素传递不同的值。

我怎样才能把它移动到一个公共的地方，在那里它会被调用。例如，如果我只有这些(this(.attr，我可以创建一个类，因为它对于每个标签都是通用的。

你可以这样做

  1. 为所有元素指定一个通用类名
  2. 然后向每个标签添加一个数据属性"data-enum"，并具有相应的值。

然后你可以像这样编写代码，

$(".className").click(function () {
    var a = $(this).attr('a');
    var b = $(this).attr('b');
    var c = $(this).attr('c');
    var enum = $(this).data('enum');
});

你可以使用 jquery 来获取这个：

$("body").on("click", "someClass", function() {
    //code here
});

你不需要写$(this).attr('a'),$(this).attr('b'),$(this).attr('c')

再次和 agin 在每个 onClick 上只是 PaaS this对象并将它们全部置于功能中，例如：

onclick="triggersTracking(this,Enum.BtnSellerView)"

function triggersTracking(obj,enumVal){
  // get these values here by obj (no repetitive code needed in every onclick ) 
   $(obj).attr('a')
   $(obj).attr('c')
   $(obj).attr('b')
}

做这样的事情

.click((

.on((

.data((

如果您使用像 data-enum 、data-e....

所以使用 $(this(.data(( 它将返回正在启动的 JSON 中的所有属性 从数据-

$('.click').click(function(e) {
  console.log($(this).data())
  $('body').append($(this).attr('a'))
})
// if you have dynamic html tag then go for .on 
$('body').on('click','.click',function(){
//callback 
  console.log($(this).data())
  $('body').append($(this).attr('a'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="click" a="i am a attr of  p" b="i am b" data-a="i am data a">i am p</p>
<h2 class="click" a="i am a attr of h2">i am  h2</h2>

相关文章：