修改文本框的值

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; ifunction 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>

效果图