如何區分這些條目？

Question

我有一個關於我一直在努力的項目的新問題。我正在設計一個帶有不同顏色單元的網格。它有一個隱藏的div，顯示單元格被點擊的時候，但是我意識到只有一個單元格（它的最後一個類型）會顯示。即如果我有2個對象的「objaffinity」列爲0（「敵人」），它會在網格上顯示兩個紅色單元格，但只有最後一個纔會真正起作用。 我怎樣才能讓它顯示每個單元的正確信息？

這裏是我的代碼：

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方法將允許您在特定單元格內查找所需的元素。 祝你好運！