案例讲解

一，html片段

1   <div class="page-upload">
2      <div class="tab-wrapper2">
3             <span>交易结果通知</span>
4         </div>
5         <form id="submitForm" action="" method="post">
6         <input type="hidden" id="wxOpenId" name="wxOpenId" value="${wxOpenId}"/>
7             <ul class="info-list">
8             <#list switchList as switch>
9                 <li class="info-list-li">
10                     <label >${switch.messageTypeDesc}</label>
11                     <div class="li-right">
12                         <div id='isUniform_${switch.messageTypeCode}' messageTypeCode="${switch.messageTypeCode}"  class="slide-block slide-right" onclick="loadSwitch(this);">
13                             <div class="slide-block-ball"></div>
14                              <input type="hidden" id="isUniformSocialCredit_${switch.messageTypeCode}" name="isUniformSocialCredit_${switch.messageTypeCode}" value="${switch.messageSwitch}" />
15                         </div>
16                     </div>
17                 </li>
18             </#list>
19             </ul>
20         </form>
21     </div>

 二，js的脚本

1 function loadSwitch(that){
2     console.info(that);
3     var isUniformSocialCredit_Val=$(that).find("input").attr("value");
4     var isUniformSocialCredit_Id=$(that).find("input").attr("id");
5     var isUniformSocialCredit_Name=$(that).find("input").attr("name");
6     var isUniform_Id=$(that).attr("id");
7     var isUniform_class=$(that).attr("class");
8     var messageTypeCode=$(that).attr("messageTypeCode");
9     var openId=$("#wxOpenId").val();
10        if (isUniform_class.indexOf('slide-right') > -1) {
11            var url = '${rc.contextPath}/switchOff.htm';
12           var messageTypeCode=
13             $.ajax({
14                 url: url,
15                 type: 'POST',
16                 dataType: 'json',
17                 data: {"messageTypeCode": messageTypeCode, "openId": openId},
18                 async: false,
19                 success: function(data){
20                     if ("000" == data.code) {
21                         $("#" + isUniform_Id + "").removeClass("slide-block slide-right");
22                         $("#" + isUniform_Id + "").addClass("slide-block");
23                         $("#" + isUniformSocialCredit_Id + "").val('0');
24                     } else {
25                         alert("关闭失败");
26                     }
27                 }
28             });
29

三，分析代码 

3.1，

这个时候我们有一个点击事件loadSwitch，注意这个loadSwitch方法是由参数的就是this，那么这个this是什么呢。我们通过console.info(that);（注意这里不能用this关键字的，包括function loadSwitch(that)这里的that是不能用this关键字的要注意了。

我们可以看到它把这个div里面的所有的内同都给打印了出来。,

3.2

这个时候我们想获取div里面的id的值 ，或者class的值，甚至可以自己随便定义一个比如messgetypecode等都可以通过

var isUniform_Id=$(that).attr("id");
var isUniform_class=$(that).attr("class");
var messageTypeCode=$(that).attr("messageTypeCode");

这种方式来获取就行了。

3.3

console.info($(that).find("input"));

这个字段是什么呢，因为我们发现这个标签里面有个input标签所以我们用find的属性

 打印出来的是这个。

3.4，

那么重点来了，这个时候我们想要获取什么参数直接用attr就行了，比如我们想要获取里面的baseURL的值，直接如下面的写法就行了。

$(that).find("input").attr("baseURL")

我们想获取value的值直接

$(that).find("input").attr("value")就行了。

总结

这种通过console.info来查看元素，并且通过find("标签").attr("属性")来获取属性值的方法，有点类似于java中Eclipse中类.方法来查看都有什么的意味，相信这种方法以后应该会常用的。