修改文本框的值

来源：互联网发布：手机任意显示软件编辑：程序博客网时间：2024/06/05 11:56

html部分

<div class="lis">     <div>          <span>妙味实体课程</span>         <img src="img/pen.png" alt="" />     </div>     <div>         <input type="text" value="妙味实体课程" />         <a href="#">保存</a>         <a href="#">取消</a>     </div></div><div class="lis">     <div>          <span>妙味实体课程</span>         <img src="img/pen.png" alt="" />     </div>     <div>         <input type="text" value="妙味实体课程" />         <a href="#">保存</a>         <a href="#">取消</a>     </div></div><div class="lis">     <div>          <span>妙味实体课程</span>         <img src="img/pen.png" alt="" />     </div>     <div>         <input type="text" value="妙味实体课程" />         <a href="#">保存</a>         <a href="#">取消</a>     </div></div>

css部分

<style>     *{margin: 0; padding: 0;}     body{padding: 100px;}     .lis{position: relative; margin-bottom: 5px;}     .lis div:nth-child(1) span{font-size: 18px; color: #333;}     .lis div:nth-child(1) img{width: 25px; height: 25px; position: relatived; top: 4px; margin-left: 10px; cursor: pointer;}     .lis div:nth-child(2){display: none;}     .lis div:nth-child(2) input{font-size: 18px; color: #333;}     .lis div:nth-child(2) a{text-decoration: none; color: green; margin-left: 6px; display: inline-block; width: 40px; height: 25px; text-align: center; line-height: 25px;}     .lis div:nth-child(2) a:hover{background: green; color: #fff;} </style>

js部分

 <script>        //js方法：        var alis = document.getElementsByClassName("lis");        for( var i=0; i<alis.length; i++ ){            miaowei(alis[i]);        }        function miaowei(alis){                var adiv = alis.getElementsByTagName("div");                var aspan = alis.getElementsByTagName("span")[0];                var aimg = alis.getElementsByTagName("img")[0];                var ainp = alis.getElementsByTagName("input")[0];                var alia = alis.getElementsByTagName("a");                aimg.onclick = function(){                    console.log(this)                    adiv[0].style.display = "none";                    adiv[1].style.display = "block";                }                alia[1].onclick = function(){                    adiv[0].style.display = "block";                    adiv[1].style.display = "none";                }                alia[0].onclick = function(){                    adiv[0].style.display = "block";                    adiv[1].style.display = "none";                    if(ainp.value==""){                        aspan.innerHTML = "妙味实体课程";                    }else{                        aspan.innerHTML = ainp.value;                    }                }            }        //jquery方法：        $(function(){            $(".lis").find("img").click(function(){                $(this).parent("div").css("display","none");                $(this).parent("div").siblings("div").css("display","block");            })            $(".lis>div>a:nth-of-type(1)").click(function(){                $(this).parent("div").css("display","none");                $(this).parent("div").siblings("div").css("display","block");                var ainp = $(this).siblings("input");                if(ainp.val()==""){                    $(this).parent("div").siblings("div").find("span").text("妙味实体课程");                }else{                     $(this).parent("div").siblings("div").find("span").text(ainp.val());                }            })            $(".lis>div>a:nth-of-type(2)").click(function(){                $(this).parent("div").css("display","none");                $(this).parent("div").siblings("div").css("display","block");            })        }); </script>

效果图

这里写图片描述

阅读全文

0 0