时间戳

首页 > 解决方案 > 如何通过 jQuery/js 在内联 css 中添加 flex 而不是阻塞

javascript - 如何通过 jQuery/js 在内联 css 中添加 flex 而不是阻塞

问题描述

我有简单的 javascript 用于在按钮单击时显示和隐藏项目，反之亦然。

  1. 目前，当我单击加载更多按钮时它会添加stlye="display: block;" 到div.item selector

  2. 当我点击Show Less按钮时，它会添加stlye="display: none;"到div.item selector

我需要添加stlye="display: flex;"而不是stlye="display: block;"

单击加载更多按钮时

这是js，但我不知道要更改什么

$(document).ready(function () {
// Load the first 3 list items from another HTML file
//$('#myList2').load('externalList.html div.item:lt(3)');
$('#myList2 div.item:lt(3)').show();
$('#showLess').hide();
var items =  8;
var shown =  3;
$('#loadMore').click(function () {
    $('#showLess').show();
    shown = $('#myList2 div.item:visible').size()+2;
    if(shown< items) {$('#myList2 div.item:lt('+shown+')').show();}
    else {$('#myList2 div.item:lt('+items+')').show();
         $('#loadMore').hide();
         }
});
$('#showLess').click(function () {
    $('#myList2 div.item').not(':lt(3)').hide();
    $('#loadMore').show();
    $('#showLess').hide();
});
});

请帮忙，我认为这是一个简单的修复

标签： javascriptjqueryhtmlcssflexbox

解决方案

将 .show() 更改为 .css() 并传入 ('display','flex') 将为您提供所需的效果。

但是，我个人从不建议在 js 文件中执行 css，我几乎总是会切换一个类来处理这个问题，这样下一个开发人员就知道在哪里更改 css ;)

$(document).ready(function () {
  // Load the first 3 list items from another HTML file
  //$('#myList2').load('externalList.html div.item:lt(3)');
  $('#myList2 div.item:lt(3)').show();
  $('#showLess').hide();
  var items = 8;
  var shown = 3;
  $('#loadMore').click(function () {
    $('#showLess').show();
    shown = $('#myList2 div.item:visible').size() + 2;
    if (shown < items) {
      $('#myList2 div.item:lt(' + shown + ')').css('display', 'flex');
    } else {
      $('#myList2 div.item:lt(' + items + ')').css('display', 'flex');
      $('#loadMore').hide();
    }
  });
  $('#showLess').click(function () {
    $('#myList2 div.item').not(':lt(3)').hide();
    $('#loadMore').show();
    $('#showLess').hide();
  });
});

推荐阅读