博客列表 >论坛回复相同class名jq点击互不影响的解决方法

论坛回复相同class名jq点击互不影响的解决方法

kiimi的博客
kiimi的博客原创
2017年12月27日 15:17:20658浏览

在作累死百度贴吧的回复功能时,发现点击回复和收起回复过程中,由于class名相同,导致点击回复时,所有的回复框都会出现,点击收起回复,所有的回复框都会收起,为了解决这个问题,想到了以下解决方案。

HTML代码:

<body>
    <div class="lz">
        <div class="name">{$arr[0]['name']}</div>
        <div class="cont">{$arr[0]['cont']}</div>
        <a href="javascript:void(0)" class="hf" title="{$arr[0]['id']}">回复</a>
        <a href="javascript:void(0)" class="hf1">收起回复</a>
    </div>
    <div class="re">
        <textarea></textarea>
        <label><a href="javascript:void(0)" title="{$arr[0]['id']}">发表</a></label>
    </div>
    <div class="lz">
        <div class="name">{$arr[0]['name']}</div>
        <div class="cont">{$arr[0]['cont']}</div>
        <a href="javascript:void(0)" class="hf" title="{$arr[0]['id']}">回复</a>
        <a href="javascript:void(0)" class="hf1">收起回复</a>
    </div>
    <div class="re">
        <textarea></textarea>
        <label><a href="javascript:void(0)" title="{$arr[0]['id']}">发表</a></label>
    </div>
</body>

JavaScript代码:

<script>
    $('.hf').each(function (i,v) {
        $(this).click(function () {
            $('.hf1').eq(i).show();
            $(this).css('display','none');
            $('.re').eq(i).show();
        })
    });
    $('.hf1').each(function (i,v) {
        $(this).click(function () {
            $('.hf').eq(i).css('display','block');
            $(this).css('display','none');
            $('.re').eq(i).css('display','none');
        })
    })
</script>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议