代码之家 › 专栏 › 技术社区 › sreepurna

对多个类调用单个函数

css html jquery javascript

sreepurna · 技术社区 · 7 年前

我有两个按钮:一个带班级 btn-star 和另一个 btn-current . 我在每次点击时都调用一个独立的函数。但现在,我只想在调用函数时调用一个函数。

我的代码与此类似:

$('document').ready(() => {
 $(document).on('click', '.btn-star', function () {
    // Do stuff
 }
 $(document).on('click', '.btn-current', function () {
    // Do stuff
 }
}

8 回复 | 直到 7 年前

Abrar 7 年前

您可以单独定义一个函数,并将其作为两个按钮的“单击处理程序”的回调传入。例如-

$('document').ready(() => {
 const commonFunc = () => {
     // do common stuffs here
 }
 $(document).on('click', '.btn-star', commonFunc());
 $(document).on('click', '.btn-current', commonFunc());
}

希望有帮助!

Lorddirt 7 年前

您可以尝试此代码。对于只有一行代码的一个操作,可以使用多个元素click事件,只需使用逗号分隔元素即可。

 $('document').ready(() => {
     const myFunction= () => {
         // Your Code here...
        }
     $(document).on('click', '.btn-current, .btn-current', function () {
        myFunction();
     }
    }

Fernando Souza 7 年前

如果要调用同一个函数,可以使用简单的J查询表达式选择两个按钮类:

$('.btn-star, .btn-current').click(function() {
 // Do stuff
}

在引号内用逗号分隔选择器。

您可以在以下链接中阅读有关j-query选择器的更多信息: https://www.sitepoint.com/comprehensive-jquery-selectors/

Mohammed Gadi nnattawat 7 年前

稍微短一点的代码…

  $('document').ready(() => {
    function commonFunc() {
        //do stuffs here
    }

    $('.btn-star, .btn-current').on('click', commonFunc);
    }

Therichpost 7 年前

您可以这样尝试:

    function test()
    {
     //your code
    }

    $(".btn1, .btn2").on("click", funciton(){
      test();
    });

anjaneyulubatta505 Anshik 7 年前

尝试以下代码

 $('.btn-star, .btn-current').on('click', function () {
    // Do shared stuff
 });

参考文献: http://api.jquery.com/on/

Lorddirt 7 年前

为什么在本文中标记了[javascript]?如果它是要存在的,我假设您将接受JavaScript响应,对吗?

如果您使用的是JavaScript,这会更简单,您只需在HTML代码中添加onclick='function()'并在其中执行您的函数即可。

<html>
<head>
<script>
function buttonFunction(buttonName){
//EDIT 3.0: You can make one button do the same as the other button, but you can also make it do something else at the same time!
if(buttonName == 'btn-star'){
//other code such as:
alert("Stars are awesome!");
}
alert("You just clicked " + buttonName);
}
</script>
</head>
<body>
<div id='button1'>
<button id='btn-star' onclick='buttonFunction("btn-star")'>btn-star</button>
</div>
<br/>
<div id='button2'>
<button id='btc-current' onclick='buttonFunction("btn-current")'>btn-current</button>
</div>
</body>
</html>

如果你愿意,你也可以另外让一个按钮和另一个按钮做同样的事情,然后再做一些不同的事情,就像我在这段代码中做的那样。

P.S:我只是假设允许使用javascript,因为毕竟它是在本文中标记的。

编辑:我向您展示了一个例子,其中一个按钮的操作与另一个略有不同,但在某种程度上仍然相同。

另一个编辑:你可以用这个做很多事情,添加关于你能用这个片段做什么的想法。

Laxmi Priyam Dubey 7 年前

你可以试试

    $('.btn-star , .btn-current').on('click', function () {
        //do something common for elements
    });

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前