Question

有人可以帮我简化这段代码吗？我希望能够编写更少的代码行，而不是用不同的选择器重复相同的代码（听起来像一个循环，但我不知道如何去做）。

当我用逗号分隔多个类时，它们不会单独显示隐藏内容。

$(document).ready(function(){


//hide show toggle Latest 

$(".more-text-latest, .more-text-latest-2").hide();

$(".read-more-latest").click(function(event){
 event.preventDefault();
$(".more-text-latest").slideToggle(600);
      $(this).toggleClass(".more-text-latest");
    });

$(".read-more-latest-2").click(function(){
$(".more-text-latest-2").slideToggle(600);
      $(this).toggleClass(".more-text-latest-2");
    });

Answer 1

如果你只想要一个执行相同操作的循环，有几种方法可以实现它，例如：

$(document).ready(function () {
    //hide show toggle Latest 
    [
        '.read-more-latest',
        '.read-more-latest-2'
    ].forEach(function (selector) {
        var moreTextSelector = selector.replace('read-more', 'more-text');
        $(moreTextSelector).hide();

        $(selector).click(function (e) {
            e.preventDefault();

            $(moreTextSelector).slideToggle(600);
            $(this).toggleClass(moreTextSelector);

            if ($(this).hasClass(moreTextSelector)) {
                $(this).html('Return');
            }
            else {
                $(this).html('Read More');
            }
        });
    });
});

使用多个选择器简化隐藏/显示，以便在单击时单独显示

1 个答案: