页面jquery调试的一个宝贵经验（类似于Eclipse中的写出一个对象点它的方法时候用alt加/可以跳出来它所有的方法）

2022-11-30 16:44:44

案例讲解

一，html片段

   <div class="page-upload">
      <div class="tab-wrapper2">
             <span>交易结果通知</span>
         </div>
         <form id="submitForm" action="" method="post">
         <input type="hidden" id="wxOpenId" name="wxOpenId" value="${wxOpenId}"/>
             <ul class="info-list">
             <#list switchList as switch>
                 <li class="info-list-li">
                     <label >${switch.messageTypeDesc}</label>
                     <div class="li-right">
                         <div id='isUniform_${switch.messageTypeCode}' messageTypeCode="${switch.messageTypeCode}"  class="slide-block slide-right" onclick="loadSwitch(this);">
                             <div class="slide-block-ball"></div>
                              <input type="hidden" id="isUniformSocialCredit_${switch.messageTypeCode}" name="isUniformSocialCredit_${switch.messageTypeCode}" value="${switch.messageSwitch}" />
                         </div>
                     </div>
                 </li>
             </#list>
             </ul>
         </form>
     </div>

二，js的脚本

 function loadSwitch(that){
     console.info(that);
     var isUniformSocialCredit_Val=$(that).find("input").attr("value");
     var isUniformSocialCredit_Id=$(that).find("input").attr("id");
     var isUniformSocialCredit_Name=$(that).find("input").attr("name");
     var isUniform_Id=$(that).attr("id");
     var isUniform_class=$(that).attr("class");
     var messageTypeCode=$(that).attr("messageTypeCode");
     var openId=$("#wxOpenId").val();
        if (isUniform_class.indexOf('slide-right') > -1) {
            var url = '${rc.contextPath}/switchOff.htm';
           var messageTypeCode=
             $.ajax({
                 url: url,
                 type: 'POST',
                 dataType: 'json',
                 data: {"messageTypeCode": messageTypeCode, "openId": openId},
                 async: false,
                 success: function(data){
                     if ("000" == data.code) {
                         $("#" + isUniform_Id + "").removeClass("slide-block slide-right");
                         $("#" + isUniform_Id + "").addClass("slide-block");
                         $("#" + isUniformSocialCredit_Id + "").val('0');
                     } else {
                         alert("关闭失败");
                     }
                 }
             });

三，分析代码

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中类.方法来查看都有什么的意味，相信这种方法以后应该会常用的。

码农公寓