Jquery + CSS根据视口宽度大小显示/隐藏表元素

Jquery + CSS to show/hide table elements based on viewport width size

本文关键字：显示 隐藏 元素 CSS 视口 Jquery      更新时间：2023-09-26

如果有人能就我的问题提供建议，我将不胜感激。我在 JSFiddle 上的代码

我有模型列表和相应的值，这些

模型和值在几个类别中发生变化。我有一个简单的表格来显示这些数据。但是，当我的视口宽度为 <=640 px 时，我需要更改表格结构，以仅显示 1 个类别并使其可单击，以便值可以更改。

当我调整屏幕大小时，我的问题出现了。当我的屏幕尺寸<=640 px并且我单击类别（值正在更改）并调整回更大的屏幕尺寸时，我的表应该再次显示所有值。如果您能帮助我进行一些 jquery 修复，我将不胜感激。

.JS：

$('a.cashback-btn').click(function(event) {
  if ($(this).hasClass('active')) {
    $('.cashback-block .cash-table').slideUp('fast');
    $(this).find('i').removeClass("fa-chevron-up");
    $(this).find('i').addClass("fa-chevron-down");
    $(this).removeClass('active');
  } else {
    $('.cashback-block .cash-table').slideDown('fast');
    $(this).find('i').removeClass("fa-chevron-down");
    $(this).find('i').addClass("fa-chevron-up");
    $(this).addClass('active');
    $('html, body').animate({
      scrollTop: $('a.cashback-btn').offset().top
    }, 1000);
  }
});
var medalsCnt = 1; // 1-3, 4-6, 7-10, >10
var medalsMsg = "1-3 category";
$('.cash-table th.mobile').click(function() {
  medalsCnt++;
  $('.cashback-block table td:not(:first-child)').hide();
  if (medalsCnt == 2) {
    medalsMsg = "4-6 category";
    $('.cashback-block table td:nth-child(3)').show();
  } else if (medalsCnt == 3) {
    medalsMsg = "7-10 category";
    $('.cashback-block table td:nth-child(4)').show();
  } else if (medalsCnt == 4) {
    medalsMsg = "more 10 category";
    $('.cashback-block table td:nth-child(5)').show();
  }
  if (medalsCnt > 4) {
    medalsCnt = 1;
    medalsMsg = "1-3 category";
    $('.cashback-block table td:nth-child(2)').show();
  }
  $(this).find('span').text(medalsMsg);
});

更新

$( window ).resize(function () {
     if($('.mobile-version').is(":visible")){
        return; //need to show/hide only one column based on category selected
     }
     else{
        $('.cashback-block table td').show(); //works ok, but now mobile version is not working
     }
  });

var wW = $(window).width();
if(wW <= 640){
    // get tr that you want to be clickable
    // add event click
        // run code
}

使用 css 中的媒体查询更改表的样式。隐藏您不想显示的所有表格行。

希望在代码中添加以下更改，以便它起作用。 

$(window).resize(function(ev) {
    console.log(ev);
    if ($('.mobile-version').is(":visible")) {
        return; //need to show/hide only one column based on category selected
    } else {
    }
          if($(window).width()<=640){
            $('.cashback-block table td:not(:first-child)').hide();
            $('.cashback-block table td:nth-child('+(medalsCnt+1)+')').show(); //works ok, but now mobile version is not working                
        }else{
            $('.cashback-block table td').show();
        }
});

JS小提琴是 https://jsfiddle.net/nepovx0e/7/

我建议您检查窗口宽度，并使用另一个变量仅绑定事件一次。如果不检查这一点，则相同的事件将附加到元素的次数与调整小于 640 像素的宽度相同。

var eventBind == false
if ($(window).width() <= 640 && eventBind == false) 
    { 
     // now bind your event here.
     eventBind  = true;
}
相关文章：