JS得到div ,button标签内的value值_js获取button的value值

作者：菜鸟追梦旅行 | 2024-05-23 15:43:55

踩

js获取button的value值

JS得到div ,button标签内的value值

一：静态div

第一种：单独div

<div id="test" value="yes" > </div>

通过JS直接得到div的value属性是得不到的,输出为undefined 这是因为div没有value属性所以这样是得不到的

要用t1.getAttribute("value");

第二种：多个div

举例：这里用button举例。区别在于$("button")是获取到button标签。

$("div")或者设置div标签的唯一id即可获取div


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 
	<!--循环输出了许多p，点那个获取到点击的那个的value 然后ajax发送出去这个value ？？怎么弄 -->
	<div id="1">
		<button value="20">点我获取Value</button>
		<button value="21">点我获取Value</button>
		<button value="22">点我获取Value</button>
		<button value="23">点我获取Value</button>
	</div>
 
</body>
<script
	src="${pageContext.request.contextPath}/lib/jquery/jquery-1.11.1.js"
	type="text/javascript" charset="utf-8"></script>
 
<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function() {
			var bId = this.value;
			console.log(bId);
			$.ajax({
				
			});
		})
		
	})
	/*ajax请求，显得到当前点击的button的id和value（课程ID）  */
</script>
</html>

二：js遍历的button

无需关注ajax，这里的思路是将要获取的的标签添加onclick（）事件，并将value传入。通过点击事件获取到当前循环遍历出的标签内的值。

<button id="replybtns" onclick="replyUser('+resp[i].fromUserId+')"  type="button" class="btn btn-default right" value="'+resp[i].fromUserId+'">回复</button>'


$(function() {
				var courseId = "${courseId}";
				console.log(courseId);
				$.ajax({
					url:"${pageContext.request.contextPath}/discuss/getFrontReplyDiscuss.action",
					data:{"courseId" : courseId},
					dataTyoe:"json",
					success:function(resp){
						console.log(resp);
						var str = '';
						for(var i=0;i<resp.length;i++){
						    str +=
						    '<div class="dis-content"> '+
						    	'<span class="name-desp" id="userName">'+resp[i].fromUser+'</span>'+
						    	'<span class="label label-default">回复</span>'+
						    	'<span class="name-desp" id="userName">'+resp[i].byReplyUser+'</span>'+
						    	'<span class="tie-time" id="pubTime">'+resp[i].publishTime+'</span>'+
						    	'<div>'+
						    		'<div class="panel panel-default">'+
						    			'<div class="panel-body" id="outline" value="'+resp[i].fromUserId+'"  >'+
						    				resp[i].content
						    			+'</div>'+
						    		'</div>'+
						    		' <button id="replybtns" onclick="replyUser('+resp[i].fromUserId+')"  type="button" class="btn btn-default right" value="'+resp[i].fromUserId+'">回复</button>'+
						    	'</div>'+
						    '</div>'+
						    '<span class="blank20"></span>'				
						}
						$("#rdiscuss").html(str);
					}
				}); 
			});

获取方法：


                function replyUser(id){
				    var bId1 = id;
				    console.log(bId1+"我爱你");
				    $.ajax({
					    //发送请求
				    });
                }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/613469