0

我有一个关于我一直在从事的项目的新问题。我正在设计一个带有不同颜色单元格的网格。它有一个隐藏的 div 显示单击单元格的时间，但是我意识到只有一个单元格（它的最后一个类型）会显示。即，如果我有 2 个对象，列“objaffinity”为 0（“enemy”），它将在网格上显示两个红色单元格，但只有最后一个单元格会真正起作用。我怎样才能使它显示每个单元格的正确信息？

这是我的代码：

mapgen.php：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="cellinfo.js"></script>

<script src="cmenu.js"></script>
<?php
require("sql.php");
$sql = <<<SQL
    SELECT *
    FROM `maps`
    WHERE `objpresent` = 1
SQL;

if(!$result = $db->query($sql)){
    die('There was an error running the query [' . $db->error . ']'); 
} // ran the query
//$xobj = array();
//$yobj = array();
$otype = array();
$oname = array();
$xyobj = array();
while($row = $result->fetch_assoc()){
  $xyobj[$row['x']][$row['y']] = true;
  $otype[$row['id']]=$row['objaffinity'];
   $oname[$row['id']]=$row['object'];
}

// get the rows
$cellid=1;
//find whether the row is obstructed

for ($y = 0; $y < 20; $y++) {
    echo '<tr>';
    for ($x = 0; $x < 25; $x++) {
        echo "<td>";
        //Detect what type of object it is
        if (isset($xyobj[$x][$y])) {

        if($otype[$cellid] == 2)
        {
          echo "<a href='#'> <div class='foe'> </div><div class='foepopup'>";
          echo $oname[$cellid];
            echo "</div></a>";
        }
        elseif($otype[$cellid] == 1)
        {
     echo "<a href='#'><div class='friend'></div><div class='friendpopup'>";
          echo $oname[$cellid];
            echo "</div></a>";
        }
        else
        {
     echo "<a href='#'> <div class='neutral'></div><div class='neutralpopup'>";
          echo $oname[$cellid];
            echo "</div></a>";
        }



            $cellid++;
            }


        echo '</td>';
    }
    echo '</tr>';
}


?>

细胞信息.js：

$(document).ready(function(){
//initially hide all popups
$(".foepopup").hide();
$(".neutralpopup").hide();
$(".friendpopup").hide();


//foebutton selected
$(".foe").on("click",function(e){
$(".friendpopup").hide();
$(".neutralpopup").hide();
$(".foepopup").show();
});
//close foe when selected
$(".foepopup").on("click",function(e){
$(".foepopup").hide();
});

//neutral button pressed
$(".neutral").on("click",function(e){
$(".foepopup").hide();
$(".friendpopup").hide();
$(".neutralpopup").show();
});
//close neutral
$(".neutralpopup").on("click",function(e){
$(".neutralpopup").hide();
});

//friend button pressed
$(".friend").on("click",function(e){
$(".foepopup").hide();
$(".neutralpopup").hide();
$(".friendpopup").show();
});
//close friend
$(".friendpopup").on("click",function(e){
$(".friendpopup").hide();
});

});
4

1 回答 1

1

在您的函数中，您使用选择器，因此对于脚本而言，单击哪个 div 并不重要。让我给你看一些例子：

$(".foepopup").on("click",function(e){
    $(".foepopup").hide();
});

它应该是这样的：

$(".foepopup").on("click",function(e){
   $(this).hide();
});

另一个例子：

$(".neutral").on("click",function(e){
    $(".foepopup").hide();
    $(".friendpopup").hide();
    $(".neutralpopup").show();
});

像这样重写它：

$(".neutral").on("click",function(e){
    var td_tag = $(this).parent().parent();
    td_tag.children(".foepopup").hide();
    td_tag.children(".friendpopup").hide();
    td_tag.children(".neutralpopup").show();
});

自己重写其他代码。this是触发点击的元素。td_tag将包含单击的 div 的父单元格。之后，children方法将允许您在特定单元格中找到所需的元素。祝你好运！

于 2013-10-06T01:44:49.040 回答