[英]Jquery + CSS to show/hide table elements based on viewport width size
如果有人可以就我的問題提供建議,我將不勝感激。 我在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中的媒體查詢來更改表格的樣式。 隱藏所有不想顯示的表行。
我建議您檢查窗口寬度,並使用另一個變量將事件綁定一次。 如果不選擇此項,則在將寬度調整為小於640像素時,同一事件將被附加到元素上。
var eventBind == false
if ($(window).width() <= 640 && eventBind == false)
{
// now bind your event here.
eventBind = true;
}
在您的代碼希望中添加以下更改,使其可以正常工作。
$(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 Fiddle是https://jsfiddle.net/nepovx0e/7/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.