HTML中标签a绑定button

很明显我是猪头 2017-07-24 06:31:13
当HTML页面运行时，循环N次div，点击标签a时执行button，标签a指向JS里的click，我将标签a的id设置为“bt2”，但是发现问题，只有第一个div里的标签a可以点击，其他的标签a点击无反应。
绑定重复了吗？有什么解决办法或方式实现吗？
新手，求前辈指教，万分感谢[/size][/b]
...全文
891 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
很明显我是猪头 2017-07-26
  • 打赏
  • 举报
 回复
引用 9 楼 jslang 的回复:
[quote=引用 8 楼 hgssf9814 的回复:] [quote=引用 7 楼 z153373846 的回复:] 通过$(this).index()获取下标，执行对应下标的按钮点击
我的ID是重复的，您能写一遍给我看吗？[/quote] 怎么就非得给你们写出个完整代码才行呢？ 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div>
	<a href="#" class="YES">同意</a>
	<a href="#" class="NO">拒绝</a>
</div>
<div>
	<a href="#" class="YES">同意</a>
	<a href="#" class="NO">拒绝</a>
</div>
<div>
	<a href="#" class="YES">同意</a>
	<a href="#" class="NO">拒绝</a>
</div>
<div>
	<a href="#" class="YES">同意</a>
	<a href="#" class="NO">拒绝</a>
</div>
<div>
	<a href="#" class="YES">同意</a>
	<a href="#" class="NO">拒绝</a>
</div>
<script type="text/javascript">
$(function(){
	$("a.YES").click(function(event){
		alert("你点击了同意");
	});
	$("a.NO").click(function(event){
		alert("你点击了拒绝");
	});
});

</script>
</body>
</html>
[/quote] 谢谢大佬~好人一生平安~祝大佬万事如意，工作顺利~
z153373846 2017-07-26
  • 打赏
  • 举报
 回复 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div>
	<button></button>
	<button></button>
	<button></button>
	<button></button>
	<button></button>
	<button></button>
	<button></button>
</div>
<div class="btns">
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
</div>
<script type="text/javascript">
$(function(){
    $(".btns .YES").each(function(index, element) {
        $(this).click(function(event){
			alert("你点击了"+index+"个同意按钮");
		});
    });
	
    $(".btns .NO").each(function(index, element) {
        $(this).click(function(event){
			alert("你点击了"+index+"个拒绝按钮");
		});
    });
});
 
</script>
</body>
</html>
这个应该能满足你的要求了
很明显我是猪头 2017-07-26
  • 打赏
  • 举报
 回复
引用 11 楼 z153373846 的回复:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div>
	<button></button>
	<button></button>
	<button></button>
	<button></button>
	<button></button>
	<button></button>
	<button></button>
</div>
<div class="btns">
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
    <a href="#" class="YES">同意</a>
    <a href="#" class="NO">拒绝</a>
</div>
<script type="text/javascript">
$(function(){
    $(".btns .YES").each(function(index, element) {
        $(this).click(function(event){
			alert("你点击了"+index+"个同意按钮");
		});
    });
	
    $(".btns .NO").each(function(index, element) {
        $(this).click(function(event){
			alert("你点击了"+index+"个拒绝按钮");
		});
    });
});
 
</script>
</body>
</html>
这个应该能满足你的要求了
万分感谢您抽空回答我的问题~很抱歉，给您添麻烦了~
天际的海浪 2017-07-25
  • 打赏
  • 举报
 回复
引用 8 楼 hgssf9814 的回复:
[quote=引用 7 楼 z153373846 的回复:] 通过$(this).index()获取下标，执行对应下标的按钮点击
我的ID是重复的，您能写一遍给我看吗？[/quote] 怎么就非得给你们写出个完整代码才行呢？ 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div>
	<a href="#" class="YES">同意</a>
	<a href="#" class="NO">拒绝</a>
</div>
<div>
	<a href="#" class="YES">同意</a>
	<a href="#" class="NO">拒绝</a>
</div>
<div>
	<a href="#" class="YES">同意</a>
	<a href="#" class="NO">拒绝</a>
</div>
<div>
	<a href="#" class="YES">同意</a>
	<a href="#" class="NO">拒绝</a>
</div>
<div>
	<a href="#" class="YES">同意</a>
	<a href="#" class="NO">拒绝</a>
</div>
<script type="text/javascript">
$(function(){
	$("a.YES").click(function(event){
		alert("你点击了同意");
	});
	$("a.NO").click(function(event){
		alert("你点击了拒绝");
	});
});

</script>
</body>
</html>
很明显我是猪头 2017-07-25
  • 打赏
  • 举报
 回复
引用 7 楼 z153373846 的回复:
通过$(this).index()获取下标，执行对应下标的按钮点击
我的ID是重复的，您能写一遍给我看吗？
z153373846 2017-07-25
  • 打赏
  • 举报
 回复
通过$(this).index()获取下标，执行对应下标的按钮点击
很明显我是猪头 2017-07-24
  • 打赏
  • 举报
 回复
@天际的海浪
很明显我是猪头 2017-07-24
  • 打赏
  • 举报
 回复
引用 4 楼 jslang 的回复:

$("a.YES").click(function(event){
	.................
});
$("a.NO").click(function(event){
	.................
});
嗯，谢谢您的回答，因为我的代码里有循环，<a class="YES">和<a class="NO">都会多次出现N次，这样的话也重复绑定了吧？
天际的海浪 2017-07-24
  • 打赏
  • 举报
 回复 

$("a.YES").click(function(event){
	.................
});
$("a.NO").click(function(event){
	.................
});
很明显我是猪头 2017-07-24
  • 打赏
  • 举报
 回复
@天际的海浪
很明显我是猪头 2017-07-24
  • 打赏
  • 举报
 回复
嗯，那我该怎么做呢？
天际的海浪 2017-07-24
  • 打赏
  • 举报
 回复
同一页面中元素的id必须是唯一的，id不能重复，重复的id用js获取时，只能获取到第一个。 要获取多个元素时，应该用元素的class获取。
【guiplan2.0教程】可视化布局一键生成web前端代码
前端可视化软件guiplan教程，无论是懂前端还是不懂前端，都可以学会基本的布局操作。全程都是可视化教学，自动生成代码。生成之后的代码符合w3c规范，除了学会软件的使用以外，我们还能学到前端html结构搭建，拖拽调整html结构，css常用样式可视化的配置，以及交互功能vue可视化配置，简单的代码编写以及可视化数据绑定，事件绑定等。全程可视化编程，配置好之后效果立刻生效，同步更新，直接点击页面即可查看交互效果，更有利于减少研究成本与学习成本。无论是制作静态html页面，还是动态的vue项目页面。都支持可视化布局，可视化拖拽，还支持可视化交互。目前支持unipp与element-ui框架,支持可视化html元素操作，支持可视化拖拽html元素结构，支持一键添加html标签,支持一键添加uniapp组件或element-ui组件，支持可视化调整css样式，支持可视化vue数据与方法创建，支持可视化数据指令事件等一键绑定，支持实时预览实时更新，支持可视化交互测试修改之后直接点击预览页面即可测试，支持一键生成代码html,css,js图片等支持一键保存文件无论是静态html页面还是动态vue文件都能自动分类，自动存储。支持手写代码与自动生成代码混合编写开发，比如添加过滤器filters,监听器watch等。灵活便捷对程序员有好，是一款真正适合程序员开发的软件。
HTML：a、button、input三种标签下的图片按钮
简述： HTML中以下几种方式可以用来创建一个图片按钮（或是图片超链接）： a标签 button标签 input标签中的image类型 下面一一示例。 详解： 1、a标签 a标签用于生成超链接，当内嵌img图片标签时，点击对象就是该图片。 点击会跳转到指定链接。 创建格式： <a href="http:\\www.baidu.com" target="_blank"> <i...
HTML中几种为<button>绑定点击事件的方式比较
HTML中为button绑定事件的方式有三种。 例如以下标签： submit 一、使用jquery进行绑定 $('#btn_submit').click(function(){ }); 二、使用原声js绑定 document.getElementById("#btn_submit").addEventListener(‘click’, function(){ }, fa
a标签绑定点击事件
a标签既可以跳转，也可以绑定点击事件，可以将href设为javascript:void(0) 其中javascript表示伪协议，void(0)表示不执行动作，实际上就是不跳转的意思 然后给a像普通标签一样绑定事件监听函数即可 测试代码如下:testLoad.html (顺便测试了一下jquery里面的load函数) testLoad $(function(){
button 标签
1.button标签和a标签 button标签包含a标签，则鼠标放在上面时会有下划线 a标签包含button标签 则不会有下划线（也可以用p标签，也可以直接写） 2.button标签可以是 type=“submit” 3.button标签可以在submit的同时运行onclick指定的函数 ...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章