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

Question

我正在使用 jQuery 来隐藏或显示带有按钮的元素。 按钮值应更改为：Show more（隐藏元素时）和 show less（显示元素时）。

我的html代码

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

有什么想法吗？

Answer 1

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

更改此代码

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

到

 button  = $(this);