Question

我有一个关于我一直在做的项目的新问题。我正在设计一个带有不同颜色单元格的网格。它有一个隐藏的div，显示单击一个单元格时，但是我意识到只有一个单元格（它的最后一个单元格）会显示。即如果我有2个对象的列＆＃34; objaffinity＆＃34;如果为0（＆＃34;敌人＆＃34;），它将在网格上显示两个红色单元格，但只有最后一个实际上有效。我怎样才能使它显示每个细胞的正确信息？

这是我的代码：

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>';
}


?>

Cellinfo.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();
});

});

Answer 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方法将允许您在特定单元格内找到所需的元素。祝你好运！

如何区分这些条目？

1 个答案: