0

我使用“createDivs”类在 PHP 页面中有 17 个块的列表。当我按下键盘的 Enter 按钮以搜索 HTML 源代码中的元素以查看它是否具有名为 'blocksList div_1_1'、'blocksList 的类时,我每次都尝试获取每个块上的文本数据div_2_1' 或任何整数,因此我可以使用每个块上的文本显示警报消息。

var current_col = 1;
var current_row = 1;
var totalrowcount = 17;  //is using for how many blocks of rows I have in total 

$(document).ready(function() 
{
  $("div").show();
$(".div_"+current_col+'_'+current_row).addClass( "yellowbg" );
  getBlocks();
});

var current_top_idx = 0;
$(document).keyup(function(event)
{
  var yellowbg = $(".yellowbg");
  var rowwidth = $(".row").css( "width").split("px");

  var displayrowcount = 7;  //is using for to hide other blocks
  var rowheight = 49; //is using for to make measurement from row 1 to row 7 to hide the other blocks
  var totalwidth_current = 0;
  var totalwidth_current1 = 0;

  if(parseInt(current_row)+parseInt(1) <= 8)
  {
    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 == 13)
  {  //enter
    alert("enter tested");
    var $row = $('.blocksList div_'+i+'1');
    alert($row);
  }
  else if (event.keyCode == 38) 
  {  //up
    if(current_col > 1 && current_row == 1)
    {
      var currentrowtop = $(".mainWrap div.row:first-child").css( "margin-top");   
      var calcuatedrowtop = -(current_col*rowheight);
      currentrowtop = parseInt(currentrowtop)-rowheight;

      if((currentrowtop - calcuatedrowtop) < rowheight)
      {
     currentrowtop = parseInt(currentrowtop)+rowheight;
     currentrowtop = parseInt(currentrowtop)+rowheight;
     var rowtop = currentrowtop+="px";
     $(".mainWrap div.row:first-child").css( "margin-top", rowtop );            
                              if (current_top_idx > 0) { current_top_idx--; }
      }
      current_col--;
    }
  }
  else if (event.keyCode == 40) 
  {    //down
    if(current_col < totalrowcount && current_row == 1)
    {
                      if (current_col >= current_top_idx + displayrowcount) 
      {
        var currentrowtop = $(".mainWrap div.row:first-child").css( "margin-top");
        currentrowtop = parseInt(currentrowtop)-rowheight;
        var rowtop = currentrowtop+="px";
        $(".mainWrap div.row:first-child").css( "margin-top", rowtop );
                              current_top_idx++;
      }
      current_col++;
    }
  }
  $('div').removeClass( "yellowbg" );
  //alert(".div_"+current_col+'_'+current_row);
  $(".div_"+current_col+'_'+current_row).addClass( "yellowbg" );
});

width = new Array();
imagecontent = new Array();
pgmcontent = new Array();

var checksuminit = 0;
var checksum = 0;

function getBlocks()
{
  var i=0;
  $.ajax({
  url:'database.php',
  type:'POST',
  data:'',
  success: function(result)
  {
    var $doc = $(result);
    i=1;
    $doc.filter('p#blocks').each(function(index) {imagecontent[i] = $(this).html();i++;});
    createDivs(i-1);
    totalrowcount = i-1;

    var j=1;
    $doc.filter('#links').each(function(index) {
    var $link = $(this).html();
    $link1 = $link.replace("&amp;", "&"); 
    if($.trim($link1) !='')
    {
      checksuminit+=j;
      getlinks($link1,j);
    }
    j++;
    });
  }
 });
}

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="blocksList div_'+i+'_1"></div>' +
         '<div class="rowSubPgm">' +
             '<div id="block'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_2 row2"></div>' +
             '<div id="block'+(programsNumber++)+'" class="pgmFirstRow div_'+i+'_3 row3"></div>' +
        '</div>' +
     '</div><div class="clear"></div>');
  }
  $(".div_"+current_col+'_'+current_row).addClass( "yellowbg" );
}

function getlinks($link,j)
{
  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 currenttotal = 0;   
    var firstele = ((j-1)*0)+0; // how many blocks i want to output in per block
    var lastele = parseInt(firstele)+0; // how many blocks i want to output AFTER the first block
    var k = 1;
    var programlength = 0;

    for(;firstele <= lastele;firstele++)
    {
      currenttotal++;
      pgmcontent[firstele] = eval('title'+k);
      k++;      
    }
    checksum+=j;

    if(checksuminit == checksum)
    {  
      for(var kk=1;kk <= imagecontent.length-1;kk++)
      {
        $('#image'+kk).html(imagecontent[kk]);
      }
      $("div").show();  
    }
  }   
  });
}

在这种情况下,当我按下键盘的向下箭头按钮直到我可以进入块 6 并按下回车按钮时,它应该在警报消息上显示“块 6”,但我得到了警报消息该显示与它说“[object Object]”的空对象。当我按下回车按钮时,我试图弄清楚如何提取每个块上的文本数据以显示在警报消息上。

下面是 HTML 的样例:

<div class="mainWrap">
<div class="row" id="row1"><div id="image1" class="blocksList div_1_1 yellowbg">Block 1</div>
<div class="rowSubPgm"><div id="block1" class="pgmFirstRow div_1_2 row2"></div>
<div id="block2" class="pgmFirstRow div_1_3 row3"></div></div></div><div class="clear></div>
<div class="row" id="row2"><div id="image2" class="blocksList div_2_1">Block 2</div>
<div class="rowSubPgm"><div id="block3" class="pgmFirstRow div_2_2 row2"></div>
<div id="block4" class="pgmFirstRow div_2_3 row3"></div></div></div><div class="clear"></div>
<div class="row" id="row3"><div id="image3" class="blocksList div_3_1">Block 3</div>
<div class="rowSubPgm"><div id="block5" class="pgmFirstRow div_3_2 row2"></div>
<div id="block6" class="pgmFirstRow div_3_3 row3"></div></div></div><div class="clear"></div>
<div class="row" id="row4"><div id="image4" class="blocksList div_4_1">Block 4</div>
<div class="rowSubPgm"><div id="block7" class="pgmFirstRow div_4_2 row2"></div>

如果您需要看一下,这里是小提琴:http: //jsfiddle.net/VZWNE/21/

当我通过显示块 6 获得警报消息时,您能否告诉我如何在另一个 php 页面中搜索元素,直到找到匹配元素以提取 href 链接?

例如,当我按下按钮直到我在块 6 上时,它将搜索具有元素的类以提取块 6 文本并在另一个 PHP 源中搜索元素以找到块 6 的匹配项,然后找到href 链接提取它,它将显示“ http://www.hereisthelink.com/test.asx ”。我怎么能这样做?

这是 HTML 源代码:

<p id='blocks'>Block 1<p id='links'>http://www.testsite.com.com/myscript.php?blocks=Block 1</p><a href="">Link 1</a>
<p id='blocks'>Block 2<p id='links'>http://www.testsite.com.com/myscript.php?blocks=Block 2</p><a href="">Link 1</a>
<p id='blocks'>Block 3<p id='links'>http://www.testsite.com.com/myscript.php?blocks=Block 3</p><a href="">Link 1</a>
<p id='blocks'>Block 4<p id='links'>http://www.testsite.com.com/myscript.php?blocks=Block 4</p><a href="">Link 1</a>
<p id='blocks'>Block 5<p id='links'>http://www.testsite.com.com/myscript.php?blocks=Block 5</p><a href="">Link 1</a>
<p id='blocks'>Block 6<p id='links'>http://www.testsite.com.com/myscript.php?blocks=Block 6</p><a href="http://www.hereisthelink.com/test.asx">Link 1</a>
<p id='blocks'>Block 7<p id='links'>http://www.testsite.com.com/myscript.php?blocks=Block 7</p><a href="">Link 1</a>

这是用于搜索元素的 PHP 源代码:

<?php

function db_connect()
{
  define('DB_HOST', 'localhost');
  define('DB_USER', 'myusername');
  define('DB_PASSWORD', 'mypassword');
  define('DB_DATABASE', 'mydbname');

  $errmsg_arr = array();
  $errflag = false;
  $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);

  if(!$link) 
  {
    die('Failed to connect to server: ' . mysql_error());
  }

  $db = mysql_select_db(DB_DATABASE);
  if(!$db) 
  {
    die("Unable to select database");
  }
}

function clean($var)
  {
    return mysql_real_escape_string(strip_tags($var));
  } 
  $blocks = clean($_GET['blocks']);

  if($errflag) 
  {
    $_SESSION['ERRMSG_ARR'] = $errmsg_arr;
    echo implode('<br />',$errmsg_arr);
  }
  else 
  {
  $insert = array();

  if(isset($_GET['blocks'])) 
  {
    $insert[] = 'blocks = \'' . clean($_GET['blocks']) .'\'';
  }
  mysql_close();


  if(!$blocks) 
  {
    $qrytable1="SELECT id, blocks, links FROM mydb_info";
    $result1=mysql_query($qrytable1) or die('Error:<br />' . $qry . '<br />' . mysql_error());

    while ($row = mysql_fetch_array($result1)) 
    {
      echo "<p id='blocks'>";
      echo $row['blocks'];
      echo '<a href="' . $row['links'] . '">Link 1</a>';
    }
  }
}
?>
4

1 回答 1

1

现在我处理获取 url 的方式将是另一种更快的方法。如果你知道从你的 HTML 文件中说 Block 6 应该匹配“ http://www.hereisthelink.com/test.asx ”,我会简单地做这样的事情。

  <div id="image6" class="blocksList div_6_1" 
      data-url="http://www.hereisthelink.com/test.asx">Block 6</div>

我认为这是一个开始 - 被选中的框将具有类 "yellowbg" ,在这里我从该框中提取文本并将其放入警报中。

 if (event.keyCode == 13)
  {  
    alert("enter tested");
    var textFromBlock = $('.yellowbg').html();
    var urlFromBlock = $('.yellowbg').attr('data-url');
    alert("text from box I selected: " + textFromBlock);
    alert("url I wanted: " + urlFromBlock);
  }

如果这是一个选项,那就去做吧。原因是 jQuery 正在搜索整个 dom 以查找 .yellowbg 的位置。然后你要让它在整个 DOM 中搜索文本 "Block 6" ,然后让它找到下一个标签,然后从中读取 HTML?你无缘无故地做了很多额外的工作。只需将应该属于 Block 6 的 url 放在 Block 6 的特殊属性中,您就可以阅读它。

如果你绝对必须去寻找

有块 6 ,然后执行此操作。

   <p id='Block 6'>Block 6</p><p id='links'>http://www.testsite.com.com/myscript.php?blocks=Block 6</p><a href="http://www.hereisthelink.com/test.asx">Link 1</a>

你错过了一个结束</p>,你有一堆具有相同 ID,更改 ID 以匹配块 1、2、3、4 等。

 if (event.keyCode == 13)
  {  
    alert("enter tested");
    var textFromBlock = $('.yellowbg').html();
    var urlFromBlock = $("p[id='" + textFromBlock + "']").next('a').attr("href");
    alert("text from box I selected: " + textFromBlock);
    alert("url I wanted: " + urlFromBlock);
  }
于 2013-10-01T00:36:44.057 回答