0
У меня проблема с моим jquery. Я использую кнопку управления стрелкой клавиатуры, чтобы я мог перемещать желтую строку в каждую строку. Я не могу переместить второй и третий строки влево, чтобы я мог видеть четвертые строки справа, где он был скрыт.JQuery перемещает строки влево
Вот текущий код:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetXmlHttpObject()
{
if(window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
else
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
var current_col = 1;
var current_row = 1;
$(document).keyup(function(event){
var yellowbg = $(".yellowbg");
var rowwidth = $(".row").css("width").split("px");
var yellowbgdivclass = yellowbg.attr('class');
var splitclass = yellowbgdivclass.split(" ");
var getcurrentrow = splitclass[1].split("_");
var mainWraptop = $(".mainWrap").position().top;
var mainWrapheight = $(".mainWrap").height();
var rowmove=$("#rowmove").val();
//alert($(".row").length);
var displayrowcount = 6; //is using for to hide other channels
var rowheight = 42;
var rowwidth = 1053; //is using for how much width the row is going to display while hide the other rows
var rowwidth1 = 1303; //is using for how much width the row is going to display while hide the other rows
var totalwidth_current = 0;
var totalwidth_current1 = 0;
if(parseInt(current_row)+parseInt(1) <=5)
{
for(var i=1; i<=(parseInt(current_row)+parseInt(1));i++)
{
var yellowbgnextdivwidth = $(".div_"+current_col+'_'+i).css("width");
var yellowbgnextdivwidthsplit = yellowbgnextdivwidth.split("px");
totalwidth_current=parseInt(totalwidth_current)+parseInt(yellowbgnextdivwidthsplit[0]);
}
}
if (event.keyCode == 39)
{ //right
if (yellowbg.next().length)
{
var currentrowleft = $(".rowSubPgm div.pgmFirstRow:first").css("margin-left").split("px");
currentrowleft1 = currentrowleft[0].split("-");
currentrowleft2 = currentrowleft[0].split("-");
if(typeof(currentrowleft2[1])!= "undefined")
currentrowleft = currentrowleft2[1];
else if(typeof(currentrowleft1[1])!= "undefined")
currentrowleft = currentrowleft1[1];
else
currentrowleft = currentrowleft[0];
var nextdivwidth = $(".div_"+current_col+'_'+(parseInt(current_row)+parseInt(1))).css("width").split("px");
//alert((parseInt(rowwidth)+parseInt(currentrowleft)));
//alert(totalwidth_current);
//alert((parseInt(rowwidth)+parseInt(currentrowleft)) < totalwidth_current);
//alert(nextdivwidth);
//alert(totalwidth_current);
if((parseInt(rowwidth)+parseInt(currentrowleft)) < totalwidth_current)
{
$("body").find('.rowSubPgm').each(function(index) {
//var approx = rowwidth/250;
$(this).find('.pgmFirstRow:first').css("margin-left", "-"+(rowwidth)+"px");
});
$(".rows div:nth-child(2)").css("margin-left", "-"+parseInt(rowleft)-70);
}
if(yellowbg.next().position().top == yellowbg.position().top)
{
$(".div_"+current_col+'_'+current_row).css("margin-left", "-"+rowleft);
}
else
{
currentrowleft = parseInt(currentrowleft)+rowwidth;
var rowleft = currentrowleft+="px";
$("body").find('.rowSubPgm').each(function(index) {
$(this).find('.pgmFirstRow:first').css("margin-left", "-"+rowleft);
});
$(".rows div:nth-child(2)").css("margin-left", "-"+parseInt(rowleft)-70);
}
current_row++;
}
}
}
function createDivs(numberOfDivs)
{
var programsNumber = 1;
for(var i=1;i<=numberOfDivs;i++)
{
$('.mainWrap').append('<div class="row" id="row'+i+'"><div id="image'+i+'" class="channelList div_'+i+'_1"></div><div class="rowSubPgm"><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_2"></div><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_3"></div><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_4"></div><div id="programe'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_5"></div></div></div><div class="clear"></div>');
}
$(".div_"+current_col+'_'+current_row).addClass("yellowbg");
}
function getSchedule($link,j)
{
//var widthval = 350;
var widthval = 850;
var parts = $link.split("/");
var links = parts[parts.length-1];
var programlength = 0;
$.ajax({
url:$.trim(links),
type:'GET',
data:'',
success: function(data)
{
var $data = $(data);
var title1 = $data.filter("#title1").html();
var title2 = $data.filter("#title2").html();
var title3 = $data.filter("#title3").html();
var title4 = $data.filter("#title4").html();
var time1 = $data.filter("#time1").html();
var time2 = $data.filter("#time2").html();
var time3 = $data.filter("#time3").html();
var time4 = $data.filter("#time4").html();
var time5 = $data.filter("#time5").html();
time1 = time1.split(" ");
var time1AMPM = time1[1];
time1 = time1[0].split(":");
time1= time1[0]+'.'+time1[1];
if($.trim(time1AMPM) == 'PM' && time1<12)
time1 = parseFloat(time1)+12;
time2 = time2.split(" ");
var time2AMPM = time2[1];
time2 = time2[0].split(":");
time2= time2[0]+'.'+time2[1];
if($.trim(time2AMPM) == 'PM' && time2<12)
time2 = parseFloat(time2)+12;
time3 = time3.split(" ");
var time3AMPM = time3[1];
time3 = time3[0].split(":");
time3 = time3[0]+'.'+time3[1];
if($.trim(time3AMPM) == 'PM' && time3<12)
time3 = parseFloat(time3)+12;
time4 = time4.split(" ");
var time4AMPM = time4[1];
time4 = time4[0].split(":");
time4= time4[0]+'.'+time4[1];
if($.trim(time4AMPM) == 'PM' && time4<12)
time4 = parseFloat(time4)+12;
time5 = time5.split(" ");
var time5AMPM = time5[1];
time5 = time5[0].split(":");
time5= time5[0]+'.'+time5[1];
if($.trim(time5AMPM) == 'PM' && time5<12)
time5 = parseFloat(time5)+12;
var difftime2time1 = (parseFloat(time2) - parseFloat(time1)).toFixed(2);
var difftime3time2 = (parseFloat(time3) - parseFloat(time2)).toFixed(2);
var difftime4time3 = (parseFloat(time4) - parseFloat(time3)).toFixed(2);
var difftime5time4 = (parseFloat(time5) - parseFloat(time4)).toFixed(2);
if(isNaN(difftime2time1))
{
difftime2time1=0;
}
if(isNaN(difftime3time2))
{
difftime3time2=0;
}
if(isNaN(difftime4time3))
{
difftime4time3=0;
}
if(isNaN(difftime5time4))
{
difftime5time4=0;
}
var currenttotal = 0;
var firstele = ((j-1)*4)+1; // how many programme i want to output in per block
var lastele = parseInt(firstele)+3; // how many programme i want to output AFTER the firstele
var k = 1;
var programlength = 0;
for(;firstele <= lastele;firstele++)
{
var nexttimedate = parseInt(k)+1;
programlength = parseFloat(programlength) + parseFloat(eval('difftime'+nexttimedate+'time'+k));
var a = eval('difftime'+nexttimedate+'time'+k);
//alert(a);
if(a >= 0.30 && a <= 0.70)
{
$('#programe'+firstele).addClass("span0hr");
width[j]=250;
}
if(a >= 1.00 && a <= 1.29)
{
$('#programe'+firstele).addClass("span1hr");
width[j]=517;
}
if(a >= 1.30 && a <= 1.70)
{
$('#programe'+firstele).addClass("span1_5hr");
width[j]=701;
}
if(a >= 2.00 && a <= 2.29)
{
$('#programe'+firstele).addClass("span2hr");
width[j]=1311;
}
if(a >= 2.30 && a <= 2.70)
{
$('#programe'+firstele).addClass("span2_5hr");
width[j]=1551;
}
if(a >= 3.00 && a <= 3.29)
{
$('#programe'+firstele).addClass("span3hr");
width[j]=2051;
}
if(a >= 3.30 && a <= 3.58)
{
$('#programe'+firstele).addClass("span3_5hr");
width[j]=2301;
}
if(a >= 8.00 && a <= 8.58)
{
$('#programe'+firstele).addClass("span8hr");
width[j]=5244;
}
currenttotal++;
pgmcontent[firstele] = eval('title'+k);
k++;
}
checksum+=j;
if(checksuminit == checksum)
{
for(var ii=1;ii<width.length-1;ii++)
{
widthval+=width[ii];
}
for(var jj=1;jj <= pgmcontent.length-1;jj++)
{
$('#programe'+jj).html(pgmcontent[jj]);
}
for(var kk=1;kk <= imagecontent.length-1;kk++)
{
$('#image'+kk).html(imagecontent[kk]);
}
$("body").find('.rowSubPgm').each(function(index) {
$(this).css("width", widthval+"px");
});
$("div").show();
}
}
});
}
Я считаю, что проблема где-то в этом коде:
if (yellowbg.next().length)
{
var currentrowleft = $(".rowSubPgm div.pgmFirstRow:first").css("margin-left").split("px");
currentrowleft1 = currentrowleft[0].split("-");
currentrowleft2 = currentrowleft[0].split("-");
if(typeof(currentrowleft2[1])!= "undefined")
currentrowleft = currentrowleft2[1];
else if(typeof(currentrowleft1[1])!= "undefined")
currentrowleft = currentrowleft1[1];
else
currentrowleft = currentrowleft[0];
var nextdivwidth = $(".div_"+current_col+'_'+(parseInt(current_row)+parseInt(1))).css("width").split("px");
//alert((parseInt(rowwidth)+parseInt(currentrowleft)));
//alert(totalwidth_current);
//alert((parseInt(rowwidth)+parseInt(currentrowleft)) < totalwidth_current);
//alert(nextdivwidth);
//alert(totalwidth_current);
if((parseInt(rowwidth)+parseInt(currentrowleft)) < totalwidth_current)
{
$("body").find('.rowSubPgm').each(function(index) {
//var approx = rowwidth/250;
$(this).find('.pgmFirstRow:first').css("margin-left", "-"+(rowwidth)+"px");
});
$(".rows div:nth-child(2)").css("margin-left", "-"+parseInt(rowleft)-70);
}
if(yellowbg.next().position().top == yellowbg.position().top)
{
$(".div_"+current_col+'_'+current_row).css("margin-left", "-"+rowleft);
}
else
{
currentrowleft = parseInt(currentrowleft)+rowwidth;
var rowleft = currentrowleft+="px";
$("body").find('.rowSubPgm').each(function(index) {
$(this).find('.pgmFirstRow:first').css("margin-left", "-"+rowleft);
});
$(".rows div:nth-child(2)").css("margin-left", "-"+parseInt(rowleft)-70);
}
current_row++;
}
}
Вы знаете, как я могу переместить вторую и третью строки влево чтобы позволить мне перемещать четвертые строки влево справа, когда я нажимаю на кнопку со стрелкой вправо справа?
Случайное примечание. Поскольку вы используете jQuery, вы можете выбросить первую часть кода и вместо этого использовать '$ .ajax (...)'. – Sumurai8
да я использую jQuery. Я не могу удалить $ .ajax в первой части кода, потому что мне нужно извлечь список каналов из базы данных mysql. Знаете ли вы, как я могу перемещать вторую и третью строки влево, чтобы позволить мне перемещать четвертые строки влево справа, когда я нажимаю на кнопку со стрелкой вправо справа? –
Я имел в виду функцию GetXmlHttpObject(), которая не нужна для $ .ajax и, похоже, не имеет особой цели, если вы можете использовать $ .ajax. Я немного посмотрел на код, но он дает мне головную боль, и я тоже не могу проверить код на этом компьютере. – Sumurai8