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

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

1 个答案: