Question

我有来自DB的递归菜单功能。我添加了一些jquery代码。我点击加号然后我可以看到所有父节点。

我将添加：添加编辑删除记录按钮以便稍后弹出。我创建了针对fa-cog的点击功能，但它总是在警告时显示相同的ID。

我试用了2天但我无法在jquery脚本代码中显示正确的点击ID。我想在popover <a href="<?php echo $Linkid ;?>"</a>窗口中显示正确的id。感谢。

<?php
// Select all entries from the menu table
$result=mysqli_query($baglan, "SELECT * FROM posts ORDER BY sira ASC");
// Create a multidimensional array to conatin a list of items and parents
$menu = array(
    'items' => array(),
    'parents' => array()
);
// Builds the array lists with data from the menu table
while ($items = mysqli_fetch_assoc($result))
{
    // Creates entry into items array with current menu item id ie. $menu['items'][1]
    $menu['items'][$items['id']] = $items;
    // Creates entry into parents array. Parents array contains a list of all items with children
    $menu['parents'][$items['kat_id']][] = $items['id'];
}


// Menu builder function, parentId 0 is the root
function buildMenu($parent, $menu)
{
$html = "";
$buton = '<a class="buton"><button class="btn btn-default btn-xs"><i class="fa fa-plus"></i></button> </a>';
   if (isset($menu['parents'][$parent])){
$html .= "<ul>";
$html .= '<div class="left" id="nav">';
    foreach ($menu['parents'][$parent] as $itemId){
      if(!isset($menu['parents'][$itemId])){
$Linkid = $menu['items'][$itemId]['id'];
$ayarbuton = '<a class="goster" id="'.$Linkid.'" href="#" data-toggle="tooltip" title="'.$Linkid.'"><button class="btn btn-danger btn-xs"><i class="fa fa-cog"></i></button> </a>';
$html .="<div class='editRecord'";
 $html .= "<li>".$ayarbuton.$menu['items'][$itemId]['isim'].$menu['items'][$itemId]['id']."</li>";
$html .="</div>";

 }

    if(isset($menu['parents'][$itemId])){
$Linkid = $menu['items'][$itemId]['id'];
$html .= "<div class='bs-example'><div id='myTooltips'>";
$ayarbuton = '<a class="goster" id="'.$Linkid.'" href="#" data-toggle="tooltip" title="'.$Linkid.'"><button class="btn btn-danger btn-xs"><i class="fa fa-cog"></i></button> </a>';

$html .= "<li>".$buton.$ayarbuton . $menu['items'][$itemId]['isim']." ID = " .$Linkid;
$html .= buildMenu( $itemId, $menu );
$html .= "</div></div></li>";

           }
        }

$html .= '</div>';
$html .= "</ul>";
   }
   return $html;
}
echo buildMenu(0, $menu);
global $Linkid;
?>


<script type="text/javascript">
$(document).ready(function(){
 $(".goster").click(function(){
    var linkID = $(".goster").attr("id");   
     alert(linkID);

$("#myTooltips a").tooltip({
    template : '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-head"><h3><span class="glyphicon glyphicon-info-sign"></span> <a href="<?php echo $Linkid ;?>"></a><?php echo $Linkid ;?></h3></div><div class="tooltip-inner"></div></div>'
    });    

});

   });
</script>


<script>
  $('#nav .buton').css({cursor: "pointer"}).on('click', function(){

 var txt = $(this).html() == '<button class="btn btn-default btn-xs"><i class="fa fa-plus"></i></button> '?'<button class="btn btn-default btn-xs"><i class="fa fa-minus"></i></button> ':'<button class="btn btn-default btn-xs"><i class="fa fa-plus"></i></button> ';

  $(this).html(txt);
  $(this).nextAll('ul').eq(0).slideToggle('fast');
            })
</script>

Answer 1

使用".goster"选择器，您将选择具有goster类的所有元素，但无法确定实际单击了哪一个。要获取特定的点击元素，您可以在this回调中使用click。尝试将处理程序更改为

  $(".goster").click(function(e){
    var linkID = this.id; 
    alert(linkID);
  });

Answer 2

最后，我会这样做，谢谢大家。

<script type="text/javascript">
$(document).ready(function(){
$(".goster").click(function(e){
    var linkID = e.currentTarget.id; // e.target is the clicked element
    $(".goster").attr("href", linkID); // this will change the link URL
  });


  $("#myTooltips a").tooltip({
        template : '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-head"><h3><span class="glyphicon glyphicon-info-sign"></span> <a href="linkID"></a>TOOLTIP</h3></div><div class="tooltip-inner"></div></div>'
    });    

});

</script>

我在数组中得到相同的id

2 个答案: