javascript - 菜单上下文

Question

我正在尝试创建一个上下文菜单来编辑和删除列表中的项目。如下。

HTML

<div class="row">
        <div id="capa1" class="col-md-4 col-md-offset-4">
            <p> Div 1</p>
        </div>
    </div>

    <div class="row">
        <div id="capa2" class="col-md-4 col-md-offset-4">
            <p> Div 2</p>
        </div>
    </div>

    <div class="row">
        <div id="capa3" class="col-md-4 col-md-offset-4">
            <p> Div 3</p>
        </div>
    </div>

这是上下文菜单

    <ul id="menuCapa" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 


    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#" onClick="restauraCapa();">Restaurar</a>
    </li> 
    <li role="presentation" class="divider"></li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#" onClick="eliminaCapa();">Eliminar</a>
    </li>

</ul>

还有脚本

    <script>


    //cierra cuando abandona el elemento
    $(document).mouseleave(function(){
         $("#menuCapa").hide('fast');
    });

    //cierra cuando se presiona esc
    $(document).keydown(function(){
         $("#menuCapa").hide('fast');
    });



    //muestra el menu
    $("#capa1").mousedown(function(e) { 
    if (e.button == 2){            
    $("#menuCapa").css("top", e.pageY - 20);
    $("#menuCapa").css("left", e.pageX - 20);
    $("#menuCapa").show('fast');    
    }
    });




    //cierra el menu por defecto
    $(document).bind("contextmenu", function(e){ 
    return false;
    });



</script>

菜单可以工作，但对于单个id，因为div是我通过php的foreach循环生成的，也就是说它们是动态的，我需要知道哪个id是被点击才能传递的它的功能，我希望我已经解释得很好，谢谢你。

Answer 1

给他们每个相同的类(class)

然后

$(".capa_class").mousedown(function(e) { 
    if (e.button == 2){            
      $(this).css("top", e.pageY - 20);
      $(this).css("left", e.pageX - 20);
      $(this).show('fast');    
    }
});

所以技巧是使用类，而不是 id，并使用 $(this) 对 clicked/mouseleave/keydown 元素执行任何您想要的操作。