javascript - jquery 试图通过名称获取按钮位置

Question

所以我有一些按钮名称为 add_subpage0、add_subpage1 等等...然后单击即可运行。示例:

<input type="submit" name="add_subpage0" value="Add Subpage" onClick="popup_subpage('add_subpage0');">
<input type="submit" name="add_subpage1" value="Add Subpage" onClick="popup_subpage('add_subpage1');">

我试图捕获按钮的位置并将 div 移动到所述位置。唯一的问题(我认为)是获取按钮的名称。

<script>
function popup_subpage(thisdiv) {
    var name = 'div[name=' + thisdiv + ']';
    var thebutton = $( name );
    var popupdiv = $( 'div[id=add_subpage_popup]' );
    var position = thebutton.position();
    popupdiv.css("visibility", "visible");
    popupdiv.css("top", position.top);
    popupdiv.css("left", position.left);
}
</script>

div (add_subpage_popup) 变得可见。但立场没有改变。我认为它甚至没有捕获我设置的名称的按钮。 有什么想法吗？我不知所措。 扎克

Answer 1

var name = 'div[name=' + thisdiv + ']';

应该是

var name = 'input[name=' + thisdiv + ']';

因为该名称位于 <input> 上元素，而不是 <div> .

function popup_subpage(thisdiv) {
  var name = 'input[name=' + thisdiv + ']';
  var thebutton = $(name);
  var popupdiv = $('div[id=add_subpage_popup]');
  var position = thebutton.position();
  popupdiv.css("visibility", "visible");
  popupdiv.css("top", position.top);
  popupdiv.css("left", position.left);
}

#add_subpage_popup {
  visibility: hidden;
  position: absolute;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" name="add_subpage0" value="Add Subpage" onClick="popup_subpage('add_subpage0');">
<input type="submit" name="add_subpage1" value="Add Subpage" onClick="popup_subpage('add_subpage1');">
<div id="add_subpage_popup">
  Popup
</div>