0

我的 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++;
            }
        }

您知道如何将第二行和第三行向左移动，以便当我按下键盘右箭头按钮时，我可以将第四行从右侧向左移动吗？

4

1 回答 1

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 浮动，它们现在将（或应该）像您期望的那样向左和向右移动。

于 2013-06-25T22:00:45.457 回答