JS与JQuery点击事件传递参数

我们知道JS(javascript)是一种脚本语言，用于客户端web开发，常用来给html网页添加动态功能，是客户端运行的解释性语言。

JQuery是对js的封装，简化了ajax和html的一款js框架，利用JQuery可以更加简单和模块化的使用js.

按钮点击事件传递参数的两种写法：

1、在同网页上利用js

一个“编辑”按钮，名字为editBtn,class其他的是bootstrap按钮样式

<a type="button" methods="get" οnclick="toEdit(this)" class="editBtn btn btn-xs btn-success">编辑</a>

在js中接受参数并实现定义的函数

<script language="javascript">function toEdit(btn){var tr = $(btn).parents("tr");tr.toggleClass("edit");if(tr.hasClass("edit")){tr.find('.month input').attr("disabled",false);tr.find(".editBtn").hide();tr.find(".submitBtn").show();}else{tr.find('.month input').attr("disabled",true)}return false;}
</script>

btn即为传递过来的参数this,至当前点击的按钮。

2、在JQuery中实现

一个“编辑”按钮，名字为editBtn,class其他的是bootstrap按钮样式，不用定义onclick()函数

<a type="button" methods="get" class="editBtn btn btn-xs btn-success">编辑</a>

$(".editBtn").click(function(){    //给class为editBtn的元素添加行为var tr = $(this).parents("tr");tr.toggleClass("edit");if(tr.hasClass("edit")){tr.find('.month input').attr("disabled",false);tr.find(".editBtn").hide();tr.find(".submitBtn").show();}else{tr.find('.month input').attr("disabled",true)}return false;});

按钮被点击即触发函数，利用&(this)拿到当前参数值。

在实际项目的页面设计中，我们一般使用后者最好，原则为页面内容和行为分离，便于管理。

CSS选择器让html表现和内容相分离
JQuery选择器让页面内容和行为分离

JS与JQuery点击事件传递参数相关推荐

Antd-Design List渲染列中Button 点击事件传递参数
背景:使用List 渲染的后台数据列表中,点击删除按钮,可以将该项对应的主键传递给函数点击删除的时候,将该条商品记录对应的id 传递给函数,通过调用后台接口删除可以看到的是关键代码: onCli ...
swift3 按钮触发事件_swift5.3 UIView 与 UIButton 点击事件传递参数
UIView 与 UIbutton 点击事件的参数传递:目前我通过 tag 解决了 UIButton 的点击参数传递设置 UIButton 的 tag,详细见代码let playButton = U ...
Android通知点击事件传递参数
显示通知 private void processCustomMessage(Context context, Bundle bundle) {RemoteViews customView = new ...
vue模板字符串中点击事件传递参数
需求是在百度地图的信息窗口中点击跳转到点位的详情页面,所以用到了模板字符串的点击传参,在此记录一下: 如图: 信息窗口使用了模板字符串,点击查看按钮跳转详情,代码如下: const sContent ...
jquery触发点击事件
1.jquery触发事件函数trigger(type,[data]) 在每一个匹配的元素上出发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个submit ...
Android和JS之间互相调用方法并传递参数
场景 Android中使用WebView加载本地html并支持运行JS代码和支持缩放: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
微信小程序学习5：小程序语法-事件绑定之给事件传递参数
微信小程序学习5:小程序语法-事件绑定之给事件传递参数前面一讲是关于事件绑定的,下面对事件绑定进行补充. 在用户触发事件,比如点击按钮时,我们往往要传递一下参数用来识别是那个按钮,因为一个界面往往不 ...
ajax点击事件触发后台,使用jquery点击事件触发AJAX
我有两个下拉菜单,其中一个我试图用jquery替换单选按钮.第二个盒子通过AJAX进行更新,每次用户在第一个下拉菜单中进行选择时都会有新选项.我已经成功生成单选按钮,可以更改第一个下拉列表的值,但是当 ...
jQuery点击事件在iOS失效
1.jQuery点击事件,在Android手机上点击事件是可以的,但是iOS手机没反应. js 生成的DOM,不是HTML写的用 $('.btn').on("click",f ...

JS与JQuery点击事件传递参数

JS与JQuery点击事件传递参数相关推荐

最新文章

热门文章