javascript - 定义和调用自定义 javascript 函数的语法

标签 javascript jquery

如何从 jQuery 单击事件中调用自定义函数?

我定义了一个执行某些操作的clearOrder函数。 然后,当我单击 DOM 元素时,我想调用该函数,然后执行更多操作。

这些操作只是应用和删除类。正如您所看到的,我想在将特定类添加到 DOM 元素之前从元素中清除指定的现有类,作为一种重置。

html

<div id="neti" class="tile"> contents </div>
<div id="sife" class="tile"> contents </div>

JavaScript

(function() {
  clearOrder(function() {
    return $('.tile').removeClass("order-1 order-2 order-3 order-4 order-5 order-6 order-7 order-8 order-9 order-10 order-11 order-12 order-13 order-14 order-15 order-16");
  });

  jQuery(function() {
    $('#neti').click(function() {
      clearOrder.call;
      $('this').addClass("active");
      $('#neti').addClass("order-1");
      $('#sife').addClass("order-2");

    });
  });

}).call(this);

脚本行为应该是,当我单击一个元素时,它应该删除所有指定的类,然后应用某些类。

<小时/>

编辑:更改为以下内容,但仍然无法运行。

(function() {
  clearOrder(function() {
    return $('.tile').removeClass("order-1 order-2 order-3 order-4 order-5 order-6 order-7 order-8 order-9 order-10 order-11 order-12 order-13 order-14 order-15 order-16");
  });

  jQuery(function() {
    $('#neti').click(function() {
      clearOrder();
      $('this').addClass("active");
      $('#neti').addClass("order-1");
      $('#sife').addClass("order-2");

最佳答案

存在多个问题

(function () {
    //function declaration syntax was wrong
    function clearOrder() {
        return $('.tile').removeClass("order-1 order-2 order-3 order-4 order-5 order-6 order-7 order-8 order-9 order-10 order-11 order-12 order-13 order-14 order-15 order-16");
    };

    jQuery(function ($) {
        $('#neti').click(function () {
            //add () to the end of the function reference to invoke it
            clearOrder();
            // this is not a string literal, it has to be used as a keyword(without enclosing '') to refer the current clicked element
            $(this).addClass("active");
            $('#neti').addClass("order-1");
            $('#sife').addClass("order-2");

        });
    });

}).call(this);

演示:Fiddle

关于javascript - 定义和调用自定义 javascript 函数的语法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23947238/

相关文章:

javascript - 使用 Web 表单替换 Javascript 变量

javascript - jquery - Fancybox 两次显示第一张图片

javascript - 能够查询数组中的特定索引吗? Mongoose

javascript - 迭代后获取对象的值

javascript - MVC Razor 从 javascript View 中的 Controller 获取值

javascript - 如何检查 asp :Checkbox is checked and show or hide It using javascript?

javascript - 如何在网页加载时自动提交表单?

javascript - 轮播不显示图像

javascript - 同一页面上两个js库的js冲突

javascript - jquery从左到右滑动让div在幻灯片上跳起来