jQuery中进行点击事件绑定_jquery 使用类名绑定点击事件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45758587/article/details/113340729

这篇博客探讨了在jQuery中如何根据用户评分（0-5或6-10）动态控制文本输入框的显示与隐藏。通过绑定点击事件，并利用jQuery的addClass和removeClass方法来切换元素的类，从而实现不同评分状态下输入框的可见性控制。在初始设计中，文本输入框与评分标签处于同级位置，使得事件处理更加直观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

业务需求是在客户打分为0-5时，显示出文本输入框，在打分为6-10分时不需要显示，本身在设计的时候将这个文本输入框设置为 display:none;

<li>
    <label><span style="color: red;">*</span>3.您对本次保单复效的整体流程是否满意？
       <span>请用0-10分进行打分，10分代表非常满意，0分代表非常不满意。</span>
    </label>
    <p class="addMore">
        <a class="check">0分</a><a class="check">1分</a><a class="check">2分</a><a class="check">3分</a><a class="check">4分</a><a class="check">5分</a><a>6分</a><a>7分</a><a>8分</a><a>9分</a><a>10分</a>
    </p>
    <textarea rows="3" class="ttput" placeholder="非常抱歉给您不好的体验，请告知您的建议，以便我们后续提升">
    </textarea>
</li>
<li>
    <label><span style="color: red;">*</span>4.在本次保单复效流程中，您对寿险规划师的服务是否满意？
        <span>请用0-10分进行打分，10分代表非常满意，0分代表非常不满意。</span>
    </label>
    <p class="addMore">
         <a class="check">0分</a><a class="check">1分</a><a class="check">2分</a><a class="check">3分</a><a class="check">4分</a><a class="check">5分</a><a>6分</a><a>7分</a><a>8分</a><a>9分</a><a>10分</a>
     </p>
     <textarea rows="3" class="ttput" placeholder="非常抱歉给您不好的体验，请告知您的建议，以便我们后续提升">
     </textarea>
</li>
<li>
     <label><span style="color: red;">*</span>5.如您有其他宝贵意见或建议，也请您告诉我们（填空框）</label>
     <textarea rows="3" placeholder="点击输入">
     </textarea>  
</li>

在设置点击事件时，阅读代码可以看出来textarea文本输入框是和class为addMore的p标签同级的元素，所以可以利用这一个特性绑定事件，在过滤元素时利用不同的标识check作为区分
.removeClass方法是从匹配元素删除一个或多个类，类名之间用空格分隔。
.addClass方法是向被选元素添加一个或多个类，类名之间用空格分隔。
这里因为给ttput元素设置了隐藏，所以效果是相反的。

$(function(){
    $(".addMore a").click(function(){
        if($(this).hasClass('check')){
        // console.info('show')
            $(this).parents('.addMore').next().removeClass('ttput')
        }else{
        // console.info('hide')
            $(this).parents('.addMore').next().addClass('ttput')
        }
        // console.info($(this).parents('.addMore').next())
        // $(".ttput").show();
    });
})