javascript - jq调用与隐藏输入框;一个二级评论
天蓬老师
天蓬老师 2017-04-11 11:01:24
0
2
393
<style>

.comment-reply-box{
    position: relative;
    padding: .08rem;
    margin-top: .1rem;
    background: #F2F2F2;
    display:none;
}
.comment-reply-box.show{
    display: block;
}  
</style>
<p class="live-content">
        <p class="hd"><span class="name">小天</span><span class="icon chat-btn"></span><span class="icon like-btn">123</span></p>
        <p class="info">以邓小平理论、“三个代表”重要思想、科学发展观为指导,《视频文字》认真贯彻党的十八大、十八届二中、三中、四中、五中全会和习近平总书记系列重要讲话精神。</p>
 

        <p class="comment-list hide">
            <p><span>小天:</span>我只有两个意见,增加公务员和事业单位的缴费比例降低药费!  <time>1-12 12:49</time></p>
            <p><span>小天:</span>我只有两个意见,增加公务员和事业单位的缴费比例降低药费!  <time>1-12 12:49</time></p>
            <p><span>小天:</span>我只有两个意见,增加公务员和事业单位的缴费比例降低药费!  <time>1-12 12:49</time></p>
            <p><span>小天:</span>我只有两个意见,增加公务员和事业单位的缴费比例降低药费!  <time>1-12 12:49</time></p>
            <p class="see-more"><span class="see-more-btn">查看更多</span></p>
        </p>
    </p>

<p id="comment-reply-box" class="comment-reply-box">
    <textarea id="comment-textarea" maxlength="100"></textarea>
    <p class="fun">
        <span class="tips">最多输入100个字</span>
        <a id="confirm-btn" href="#" class="confirm">确定</a>
        <span id="cancel-btn" class="cancel">[取消]</span>
    </p>
</p>

var $box = $("#comment-reply-box");

         
         if(target.hasClass('chat-btn')){
               
            var liveContent=target.parent().parent()
            console.log(liveContent)
            console.log($box)
            console.log($.contains(liveContent,$box))
              if($.contains(liveContent,$box)){
                  console.log(1232)
                if($box.hasClass("show")){
                    $box.removeClass("show")
                    }else{
                    $box.addClass("show")
                        }
             
            }else{
              
             
              target.parent().next().after($box);
              $box.addClass("show");
            } 
                
       }; 

做的是一个二级评论;就是类似于QQ空间那种的评论;当我点击评论按钮时调用评论输入框并且宣示;再次点击时隐藏输入框;输入框在文档中;每次需要的时候才调用;上面是我用jq..contains方法写的;但是发现代码执行的过程中第一个if都是false;但是打印出的都有值

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回覆(2)
刘奇

谢邀`
写的有点乱, 建议滤清思路再问.
隐藏输入框指的是什么. 需求是什么 要实现什么效果

补充:
提供一个思路:

初始化显示主体, 点击按钮显示评论, 并且添加一个输入框去发布评论.
可以一次性初始化完, 点击按钮的时候toggle显示隐藏下面的评论(p)即可.
可以点击时发异步请求, 去处理评论p.判断是否有评论, 不要直接对dom进行判断.而要对数据源进行判断.

迷茫

我看了一下楼主的html,输入框是在html上,并不是js动态添加的,那么你获取“评论”按钮,绑定事件,然后给输入框那个元素调用jq的toggle()方法不就ok了?或者你想一个笨一点的办法,只要你一点击“评论按钮”,判断有没有class=selected,没有就给输入框加一个class名“selected”,然后,输入框调用show()方法。有的话就删掉selected,并输入框调用hide()方法。
比如:

$("评论").click(functiong(){
    if(!$("输入框.selected")){
       $(“输入框”).show();
       $(“输入框”).addClassName("sellected");
    }else{
       $(“输入框”).hide();
       $(“输入框”).removeClassName("sellected");
    }
})
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!