我的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++;
}
}
你知道如何向左移动第二和第三行，以便当我按下键盘右箭头按钮时，我可以从右边向左移动第四行吗？
答案 0 :(得分：1)
有两个问题。第一个问题是margin-left对.rowSubPgm没有任何作用，因为该对象不是浮动的。这可以通过将float: left;添加到该类的CSS来解决。 （display: inline-block;可能会被用作替代方案）
在下面的javascript中，您要设置两个元素的margin-left。 .pgmFirstRow的第一个元素是每一行的第一个“电视节目”。一旦负边距等于或大于该元素的宽度，则进一步的负边距不起作用。虽然它做了这种工作，但是对每个元素实现都会很头疼，并且移动整行会更容易。我不知道为什么你在顶部设置一个不可见元素的边距，但是如果你计划在以后放置任何东西，你应该给它们的父元素rowSubPgm类。
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( (parseInt(rowwidth) + parseInt(currentrowleft)) < totalwidth_current ) {
$('.rowSubPgm').css( "margin-left", "-"+(rowwidth)+"px" );
}
如果每个.rowSubPgm浮动，他们将（或应该）现在按照您的预期向左和向右移动。