jq数据返回 用状态来判断页面隐藏显示问题

最新推荐文章于 2022-11-01 22:27:08 发布
最新推荐文章于 2022-11-01 22:27:08 发布
阅读量883 收藏
点赞数
文章标签： jq根据后台数据状态 判断显示隐藏 jq 数据判断显示隐藏 jq 加载页面 判断显示隐藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42796490/article/details/100031538
版权

需求说明 根据状态 判断显示隐藏 我要做的是进来根据状态判断这个单子是否支付了 支付过 按钮隐藏的一个小demo

错误的例子

 function searchLIst(e) {
       let str1 = ""
        $.ajax({
           url:"wx/order/"+e,
        type:"get",
        data:{
            
        },
        dataType: 'json',
        success:function(data){
            if(data.type==1){
                data.type="代客祭扫"
            }else if(data.type==2){
                data.type="元宵送灯"
            }else if(data.type==3){
                data.type="鲜花租摆"
            }
            if(data.status==0){
                data.status = "待支付"
            }else if(data.status==1){
                data.status = "已支付"
            }else if(data.status==2){
                data.status = "已接受"
            }
            
             if(data.responseJSON.status=="已接受"||data.responseJSON.status=="已支付"){
                $("#submit").hide()
            }

                //将拿到的值显示到jsp页面
                str1 += `
                      <div class="from">
                          <div class="public">
                              <div class="public-left">下单时间：</div>
                              <div class="public-right">${data.serviceDate} </div>
                          </div>
                          <div class="public">
                              <div class="public-left">订单类型：</div>
                              <div class="public-right">${data.type}</div>
                          </div>
                          <div class="public">
                              <div class="public-left">订单内容：</div>
                              <div class="public-right">${data.tombArea}-${data.rankNo}号-${data.name} </div>
                          </div>
                          <div class="public">
                              <div class="public-left">特殊要求：</div>
                              <div class="public-right">${data.remarks}</div>
                          </div>
                          <div class="top-border">
                              <div class="public">
                                  <div class="public-left">联系客服：</div>
                                  <div class="public-right">400-444-4444 </div>
                              </div>
                              <div class="public">
                                  <div class="public-left">订单状态：</div>
                                  <div class="public-right">${data.status }</div>
                              </div>
                              <div class="public">
                                  <div class="public-left">费用金额：</div>
                                  <div class="public-right">${data.amount}元 </div>
                              </div>
                          </div>

                     </div>
                     <div class="submit">
                         <input type="button" value="支 付" onclick="pay(${data.id})" id="submit">
                    </div>
                    `;
            $(".wrap").html(str1)
        },
        error:function(e){
            // alert("错误！！");
        }
     
    });
}

说下这个错误的原因 以为你的html还没加载完毕 你来获取id元素是获取不到的 所以按钮不会隐藏的

正确实例

function searchLIst(e) {
        let str1 = ""
        $.ajax({
            url:"wx/order/"+e,
            type:"get",
            data:{

            },
        dataType: 'json',
        success:function(data){

            if(data.type==1){
                data.type="代客祭扫"
            }else if(data.type==2){
                data.type="元宵送灯"
            }else if(data.type==3){
                data.type="鲜花租摆"
            }
            if(data.status==0){
                data.status = "待支付"
            }else if(data.status==1){
                data.status = "已支付"

            }else if(data.status==2){
                data.status = "已接受"

            }

                //将拿到的值显示到jsp页面
                str1 += `
                      <div class="from">
                          <div class="public">
                              <div class="public-left">下单时间：</div>
                              <div class="public-right">${data.serviceDate} </div>
                          </div>
                          <div class="public">
                              <div class="public-left">订单类型：</div>
                              <div class="public-right">${data.type}</div>
                          </div>
                          <div class="public">
                              <div class="public-left">订单内容：</div>
                              <div class="public-right">${data.tombArea}-${data.rankNo}号-${data.name} </div>
                          </div>
                          <div class="public">
                              <div class="public-left">特殊要求：</div>
                              <div class="public-right">${data.remarks}</div>
                          </div>
                          <div class="top-border">
                              <div class="public">
                                  <div class="public-left">联系客服：</div>
                                  <div class="public-right">400-444-4444 </div>
                              </div>
                              <div class="public">
                                  <div class="public-left">订单状态：</div>
                                  <div class="public-right">${data.status }</div>
                              </div>

                              <div class="public">
                                  <div class="public-left">费用金额：</div>
                                  <div class="public-right">${data.amount}元 </div>
                              </div>
                          </div>

                     </div>
                     <div class="submit">
                         <input type="button" value="支 付" onclick="pay(${data.id})" id="submit">
                    </div>
                    `;
            $(".wrap").html(str1)
        },
        error:function(e){
            // alert("错误！！");
        },
        complete:function (data) {
            if(data.responseJSON.status=="已接受"||data.responseJSON.status=="已支付"){
                $("#submit").hide()
            }

        }
    });
}

complete这个函数是在所有都执行完成后在来执行他 所以我们的正好可以用到 在我执行完所有的thml还要判断之后 在complete里来取id元素 和判断 这样就成功了

北境程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
jqgrid实现字段显示或隐藏问题
sning999
08-08 1万+
jqgrid实现字段在不同模式下的显示问题
jq封装websocket插件，实现聊天室重连机制、心跳机制
Linzsong的博客
08-20 2111
此jq封装方法来自于这里 代码简单易懂，如下： //jqwebsocket.js //==========websocket (function($) { $.websocket = function(options) { var defaults = { domain: top.location.hostname, port...
jquery 判断显示 隐藏
Panda
06-11 2933
绑定函数<!--$(document).ready(function(){ var temp= $("#test").is(":hidden");//是否隐藏 var temp1= $("#test").is(":visible");//是否可见 alert(temp) alert(temp1)});// -->
JQuery 使用技巧（一）：判断元素是否显示与隐藏
一只奋斗的猪
11-16 4538
最近要做一些关于 SSM 项目的需求，项目是前后端不分离的，从去年上半年学习了 Vue 2 之后现在也一直再使用 VUE，近期才刚入手 VUE 3，确实变化还是挺多的，还需要慢慢的花时间去整理与沉淀。 刚接手项目的前端使用的是 JQuery，好久不写 JQuery 现在写起来还是有 VUE 的思想；习惯了之后发现 JQuery 也还是挺有乐趣的，当然肯定不如 VUE 香呀！！！ 目前整理的主要要两种方式，其实都是 is() 函数的使用： 第一种方式 var element=$('#id'); if(e
jquery如何判断显示隐藏汇总
Focus-Fe
07-25 161
       本文汇总一下jq如何判断隐藏与显示：       $(selector).is(':hidden');   $(selector).is(':visible')  
注册JQuery使用ajax调用后台方法，判断用户名、邮箱是否存在，并显示隐藏提示
ful1021的专栏
09-02 3597
JavaScript代码 function existUserName(userName, reqUserName) { if (userName.val().length > 0) { $.ajax({ type: "POST", url:
jquery ajax 没有返回值,jquery ajax返回值与无返回值问题
weixin_39939510的博客
08-05 672
jquery ajax 返回值有很多类型如有html,text,json,xml类型了，我们这些值都可以在ajaxp处理是直接使用匿名函数来直接获取，下面我整理内个jquery ajax 返回值的例子给各位参考参考。 jquery中常用的ajac有 $.ajax() , $.post , $.get() ,$.load()了。 例子jquery ajax 返回值有很多类型如有html,text,...
jquery 隐藏显示行
04-02
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的操作，包括隐藏和显示元素。本文将深入探讨如何利用 jQuery 实现表格行的隐藏与显示功能，同时也会涉及到一些基本的 HTML 和 ...
JQ滚动条效果
09-02
在网页设计与开发过程中，为了增强用户体验和提高网站的互动性，开发者们常常会利用jQuery（简称JQ）来实现各种动态效果。其中，“防CSDN论坛，页面滚动一定距离后，顶部自动出现导航栏”这种效果非常常见且实用，它...
select、radio表单回显功能实现避免使用jquery载入赋值
11-30
然而，这种方法存在一些问题，尤其是在表单有重置功能时，因为jQuery会根据JavaScript中的变量值而不是实际服务器返回的数据来设置选中状态。因此，这种方式并不推荐。 更好的做法是在服务器端处理，比如在JSP页面...
js小demo4（仿京东显示隐藏文本框内容）
学习记录
03-03 202
<style> .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 370px; height: 30...
jq控制div是否展示_jquery如何判断div是否显示？
weixin_33462167的博客
12-24 2835
jquery如何判断div是否显示？下面本篇文章给大家介绍一下使用jquery判断div是否显示的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。jquery如何判断div是否显示？很多时候会要判断一个div是不是显示着，没显示要怎么处理，显示的如何处理；方法很简单，选择到你要判断的div，再用is(":visible")判断是否显示；或者用is(':hidden')判断是否...
JS监听页面是否被隐藏和显示
weixin_45119097的博客
11-01 3221
JS监听页面是否被隐藏和显示
通过Jquery判断页面元素是否在浏览器的可视区域内
热门推荐
nox
02-23 2万+
前端开发中,有时需要判断某个元素是否在浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是javascript操作,原生方法自然可以,不过Jquery已经封装了一些属性,使用起来更方便些,我们这里就讨论这种Jquery的方式.(伸手党可直接看文章屁股 :cool:) 假设此元素为 #item,先说几个关键的属性: JavaScript1： jQuery('#item').o
js hash
千叶飘的空中楼阁
10-28 1万+
<br />location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。<br />很多人都喜欢收藏网页，以便于以后的浏览。不过对于Ajax页面来说的话，一般用一个页面来处理所有的事务，也就是说，
Jquery判断div是否显示
qq_40247975的博客
10-15 6896
代码展示 $("#test").is(":hidden");//是否隐藏 $("#test").is(":visible");//是否可见
jQuery判断元素是否显示与隐藏
hffygc的博客
11-11 2499
jQuery判断元素是否显示与隐藏
jq循环显示隐藏
最新发布
06-02
你可以使用 jQuery 中的 `each()` 函数来循环遍历元素，并使用 `show()` 和 `hide()` 函数来显示或隐藏这些元素。 例如，假设你有一个包含多个 `<div>` 元素的父元素，你可以使用以下代码在每个 `<div>` 元素上循环，并根据某些条件显示或隐藏它们： ```javascript // 循环遍历每个 div 元素 $("div").each(function() { // 如果 div 元素中的文本内容为 "hide"，则隐藏该元素 if ($(this).text() === "hide") { $(this).hide(); } // 如果 div 元素中的文本内容为 "show"，则显示该元素 else if ($(this).text() === "show") { $(this).show(); } }); ``` 在上面的代码中，我们使用 `text()` 函数获取每个 `<div>` 元素的文本内容，并根据条件调用 `show()` 或 `hide()` 函数来显示或隐藏元素。 当然，你可以根据自己的需求修改上面的代码来实现你想要的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北境程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值