jQuery技术:如何使用jQuery更改项目的可见性?

我的应用程序要求用户上传一组必需的文档(上传#1,上传#2,上传#3)。 上载完成后,将返回需求标识符(req_id)。

该页面显示要求列表,并且当上传特定项目时,当前将该类从“缺失”更改为“完成”。 但是,我也想在上传完成后将“删除”图标的可见性从隐藏更改为可见。

HTML:

  • Upload #1 <img src="https://sofzh.miximages.com/jquery/download.png" class="download" > <img src="https://sofzh.miximages.com/jquery/trash.png" class="delete" >
  • Upload #2 <img src="https://sofzh.miximages.com/jquery/download.png" class="download" > <img src="https://sofzh.miximages.com/jquery/trash.png" class="delete" >
  • Upload #3 <img src="https://sofzh.miximages.com/jquery/download.png" class="download" > <img src="https://sofzh.miximages.com/jquery/trash.png" class="delete" >

使用Javascript:

 function stopUpload(success, req_id){ if (success == 1){ $('#upload_result').html('Success!'); $("ul li[rel=" + req_id + "]").removeClass().addClass('complete') $("ul li[rel=" + req_id + "]").child('.controls').child('.delete').css('visibility','visible') } else { $('#upload_result', window.parent.document).html( 'Error!'); } $('#upload_progress').hide(); return true; } 

    要使用jQuery,请替换

     $("ul li[rel=" + req_id + "]").removeClass().addClass('complete') $("ul li[rel=" + req_id + "]").child('.controls').child('.delete').css('visibility','visible') 

    通过:

     $("ul li[rel=" + req_id + "]").removeClass().addClass('complete').find('.controls .delete').show(); 

    但是,您应该使用CSS。 所以保留你原来的jQuery并将其添加到CSS:

     ul li .controls .delete { display: block; } ul li.complete .controls .delete { display: none; } 

    你想改变

     $("ul li[rel=" + req_id + "]").child('.controls').child('.delete').css('visibility','visible') 

     $("ul li[rel=" + req_id + "] .controls .delete").show() 

    应该很好地工作。

    我倾向于使用display属性 – display:none;而不是可见性display:none;display:block;display:inline;

    需要了解更多jQuery教程分享如何使用jQuery更改项目的可见性?,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!

      以上就是jQuery教程分享如何使用jQuery更改项目的可见性?相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/981626.html

      (0)
      上一篇 2021年12月12日
      下一篇 2021年12月12日

      精彩推荐