Question

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

当前，当我单击加载更多按钮时，它会向if

stlye="display: block;"

当我单击 Show Less （显示较少）按钮时，它会将div.item selector添加到stlye="display: none;"

我需要添加div.item selector而不是stlye="display: flex;"

点击加载更多按钮

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

stlye="display: block;"

请帮助，我认为这是一个简单的解决方法

Answer 1

将.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();
  });
});

Answer 2

保持显示：默认情况下，CSS和flex都可以显示

将.hide（）更改为.css（“ display”，“ none”）;

将.show（）更改为.css（“ display”，“”）;

   $(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)').css("display", "");
    $('#showLess').css("display", "none");
    var items = 8;
    var shown = 3;
    $('#loadMore').click(function () {
        $('#showLess').css("display", "");
        shown = $('#myList2 div.item:visible').size() + 2;
        if (shown < items) { $('#myList2 div.item:lt(' + shown + ')').css("display", ""); }
        else {
            $('#myList2 div.item:lt(' + items + ')').css("display", "");
            $('#loadMore').css("display", "none");
        }
    });
    $('#showLess').click(function () {
        $('#myList2 div.item').not(':lt(3)').css("display", "none");
        $('#loadMore').css("display", "");
        $('#showLess').css("display", "none");
    });
});

Answer 3

您可以使用.css()函数来代替.show()和.hide()。

因此，当您使用时：

$('#loadMore').show();
$('#loadMore').hide();

它可以替换为：

$('#loadMore').css('display', 'flex');
$('#loadMore').css('display', 'none');

将其替换为您要成为display: flex而不是display: block的任何元素。

还要确保这些元素在CSS中以正确的样式开始。

Answer 4

$('#flexelement').show();始终在元素上放置display：block。

如果需要灵活使用它，则必须直接更改css，而无需使用快捷方式。尝试使用

$('#flexelement').css('display', 'flex');

代替

$('#flexelement').show();

Answer 5

我会建议使用jQuery addClass和removeClass函数并在css文件中处理css规则，而不是内联css规则。

var ctx = document.getElementById("myPieChart");
var input_lables = ["Astronomica" , "Deuteronic", "Floral", "Galactic", "Celestrial", "Heliosphere", "Jupiter", "Interstella","Koronis", "Eclipse", "Borealis", "Lunatic"];
var input_values = [12.21, 15.58, 11.25, 8.32];
var output_lables = [];
var output_values = [];
for(var i=0;i<input_lables.length;i++){
     if(!values[i]){
           output_lables.push(input_lables[i]);
           output_values.push(input_values[i]);
     }        
}      
var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: output_lables,
    datasets: [{
      data: output_values,
      backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
    }],      
  },
});

在您的CSS文件中：

$(document).ready(function () {
    $('#showLess').hide();
    var items =  8;
    var shown =  3;
    $('#loadMore').click(function () {
        $('#showLess').show();
        shown = shown + 2;
        if (shown < items) {
            var showItems = show;
        }
        else {
            var showItems = items;
            $('#loadMore').hide();
        }
        $('#myList2 div.item:lt(' + showItems + ')').addClass('shown-items');
    });

    $('#showLess').click(function () {
        shown = 3;
        $('#myList2 div.item').not(':lt(3)').removeClass('shown-items');
        $('#loadMore').show();
        $('#showLess').hide();
    });
});

如何在内联CSS中添加Flex而不是通过jQuery / js进行阻止

5 个答案: