Jquery改变文本按钮显示更多/显示更少

Jquery change text button show more / show less

本文关键字：显示 改变 按钮 Jquery 文本      更新时间：2023-09-26

我使用jQuery来隐藏或显示带有按钮的元素。当元素被隐藏时，按钮值应该变为:Show more;当元素被显示时，按钮值应该变为show less。

My html code

<section>
    <div class="contact_channel" name="<?php echo $this->id; ?>"></div>
    <div class="clearfix">
        <input type="button" class="showMore tiny button" value="Show more">
    </div>
    <div class="show_more" style="display:none;"></div>
</section>
我jQuery 

<script type="text/javascript">
    $(document).ready(function () {
        $('.showMore').on('click', function () {
            var section = $(this).closest('section'),
                text    = section.find('.show_more'), // use classes, not ID
                state   = text.is(':hidden');
                button  = $(this).find('input');
            text[state?'slideDown':'slideUp'](500);
            button.prop('value', function() {
                return state ? "Show more" : "Show less";
            });
            $('input').show(200);
        });
    });
</script>
如您所见，这部分代码不起作用: 
        button.prop('value', function() {
            return state ? "Show msdsdfs" : "Show lsdfsdfs";
        });
        $('input').show(200);

您不需要查找，因为按钮具有showMore类

修改代码

 button  = $(this).find('input');


 button  = $(this);
相关文章：