Question

在对按钮单击的合规性进行研究时，我碰巧添加了几个按键事件，但是如果按下Enter键，则会在条件内触发具有不同类和ID的onclick触发事件。我想将所有几种方法都放在一个函数下，然后重复使用

               $(".classOne").keydown(function (e) {
                    if (e.keyCode === 13) {
                        hideShow('classOne');
                        return false;
                    }
                });
                $("#iDOne").keydown(function (e) {
                    if (e.keyCode === 13) {
                        navigateTo('somepage');
                        return false;
                    }
                });
                $(".classTwo").keydown(function (e) {
                    if (e.keyCode === 13) {
                        $(".classTwo").trigger("click");
                        return false;
                    }
                });
                $(".classThree").keydown(function (e) {
                    if (e.keyCode === 13) {
                        navigateTo('anotherpage');
                        return false;
                    }
                });
                $(".classFour").keydown(function (e) {
                    if (e.keyCode === 13) {
                        $(".classFour").trigger("click");
                        return false;
                    }
                });
                $("#idTwo").keydown(function (e) {
                    if (e.keyCode === 13) {
                        $("#idTwo").trigger("click");
                        return false;
                    }
                });

我正在学习编写函数等，所以请原谅我的新手

    $(".targetClass").keydown(function (e) {
       if (e.keyCode === 13) {
        //  do the click/navigate/showhide...
        }
     });

targetClass更改为单击的元素/ ID

我该如何执行上述操作，在传递ID / Class（在html元素上为准）时重新使用相同的方法，并触发onclick并避免多次编写相同的函数？预先感谢您的建议。

Answer 1

您的点击操作似乎可以分为几类。如果将操作添加到元素，则代码可以在不知道实际元素是什么的情况下确定要执行的操作，例如：

public loadData(): void {

    let tableOptions: any = {
        destroy: true,
        searching: false,
        dom: 'Bfrtip',
        processing: true,
        buttons: [
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: [0,1,2,3,4,5]
                }
            },
            {
                extend: 'csvHtml5',
                exportOptions: {
                    columns: [0,1,2,3,4,5]
                }
            },
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: [0,1,2,3,4,5]
                }
            },
        ]
    }
    try {

        setTimeout(function () {
            var oldJq = $.noConflict();
            this.myDataTable = $('.atttbl1');
            this.tableWidget = this.myDataTable.DataTable(tableOptions);
            $ = oldJq;
        }, 9000)
    }catch(e) {
        alert(e);
    }
}

您可以然后在一个函数中处理它们：

data  =['category1', 'category2']
data_map = {}
data_map[','.join(data)]= 4
json.dumps(data_map)

或（首选），然后您可以为每个操作添加处理程序：

<button type="button" data-operation="click">click</button>
<button type="button" data-operation="navigate" data-navigate="anotherpage">another page</button>

根据操作和您的喜好，可以为这些使用类（对于选择器而言可能更有效，未经测试，可能会进行微优化），例如：

$(".targetClass").keydown(function (e) {
    if (e.keyCode === 13) {
       switch ($(this).data("operation")) {
           case "click":
               $(this).trigger("click")
               return false;
           case "navigate":
               navigateTo($(this).data("navigate"));
               return false;

然后使用类似的拆分事件处理程序：

$(".targetClass[data-operation=click]").keydown(function(e) {
    if (e.keyCode === 13) {
        $(this).trigger("click");
        return false;
    }
});

$(".targetClass[data-operation=navigate]").keydown(function(e) {
    if (e.keyCode === 13) {
        navigateTo($(this).data("navigate"));
        return false;
    }
});

使用单独的处理程序意味着扩展到新功能将不太可能影响现有代码（即，改进的可维护性）。如果要添加新操作：

<button type="button" class="targetClass trigger-click">click</button>
<button type="button" class="targetClass trigger-navigate" data-navigate="anotherpage">another page</button>

Answer 2

使用类似这样的东西

    function KeyDown(ele, type) {
      var $selector = null;
      if (type == 'cssClass') {
        $selector = $("." + ele);
        else if (type == "id")
          $selector = $("#" + ele);
      }

      $selctor.on("keydown", function(e) {
        if (e.keyCode === 13) {
          switch (ele)
          case "classOne":
            hideShow('classOne');
            return false;
            break;
          case "iDOne":
            navigateTo('somepage');
            break;
          case "classTwo":
            $(".classTwo").trigger("click");
            break;
          case "classThree":
            navigateTo('anotherpage');
            break;
          case "classFour":
            $(".classFour").trigger("click");
            break;
          case "idTwo":
            $("#idTwo").trigger("click");
            break;

            return false;
        }
      })
      
$(function(){
      KeyDown('classOne', 'cssClass');
      KeyDown('iDOne', 'id') ;
      KeyDown('classTwo', 'cssClass');
      KeyDown('classThree', 'cssClass');
      KeyDown('classFour', 'cssClass');
      KeyDown('idTwo', 'id') ;

})

Answer 3

您可能可以利用属性数组来遍历它们：

var elList = [".classOne","#iDOne",".classTwo",".classThree",".classFour","#idTwo"];

elList.forEach(function(el){
  $(el).keydown(function(e){
    if (e.keyCode === 13) {
      if($(this).hasClass('classOne')){
        //do your staff
        console.log('classOne');
      }
      else if($(this).attr('id') == 'iDOne'){
        //do your staff
        console.log($(this).attr('id'));
      }
      //do it for all
      //
      //
      return false;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="classOne" >classOne
<input id="iDOne">iDOne

使用ID / Class

3 个答案: