0

我刚从 JS 和 jQuery 开始，我一直在尝试改进我正在处理的 Bootstrap 3 按钮的代码。

它有两个内部跨度，一个带有文本，一个带有人字形字体图标。

我想知道是否有办法优化我的代码（只是为了学习）。

这是我的工作代码。

首先是 HTML

<button type="button" class="btn btn-default btn-lg btn-imgs">
 <span class="btn-imgs-toggle">Ocultar Imágenes </span>                                      
 <span class="glyphicon glyphicon-chevron-up"></span> 
</button>

现在是 jQuery：

$('.btn-imgs').click(function(){
    $('.thumbnail img').toggle();

    //variables
    var icono = $(this).children('.glyphicon');

    var $text = $(this).children('.btn-imgs-toggle');

    //cambia texto del boton
    $text.toggleClass('mostrar');

    //si el texto y el icono coinciden con un tipo cambialos al otro
    if( $text.hasClass('mostrar') && $(icono).is('.glyphicon-chevron-up')){
        $text.text('Mostrar imágenes');
        $(icono).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    } 

    else {
        $text.text('Ocultar imágenes');
        $(icono).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    }



});

非常感谢您对此的任何投入。通过其他已发布的问题，我一直在学习很多东西。

4

1 回答 1

1

就个人而言，我认为没有任何理由对孩子的状态进行仔细检查，除非您有其他脚本会修改这些元素。另外，icono当你定义它时已经是一个 jQuery 对象，没有理由用 jQuery 方法包装它。

如果我写这个，我会这样处理：

$(body).on('click', '.btn-imgs', function(e) {
    e.preventDefault();
    $('.thumbnail img').toggle(); // how are you sure you are toggling the correct state?
    // I would consider including this in the conditional, but I don't know the purpose of
    // this, so I will leave it as is.
    $(this).find('.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up')
    .siblings('.btn-imgs-toggle').toggleClasS('mostrar').text(function () {
        return ($(this).hasClass('glyphicon-chevron-down') ? 'Mostrar' : 'Ocultar') + ' imágenes';
    });
});
于 2013-08-23T23:26:24.617 回答