我怎样才能给我的按钮带来同样的效果?因为它们都是一样的。但我想做的是当我点击它们时有一个“灵魂般”的验证。
我的 php 代码
echo "<form action='receipt.php?name=$name' method='post'>
<input style='position:absolute; top:$this->yForBuy; left:$this->xForBuy; z-index:4;' type='button' id='btnSubmit' value='Purchase'/>
<input type='hidden' name='bidder' value='$name'>
<input type='hidden' name='item_no' value='$no'>
<input type='hidden' name='item_name' value='$itname'>
<input type='hidden' name='item_price' value='$bid'>
</form>";
<label id='soul' style='position:absolute; z-index:5; color:black;'>purchased!</label>
这是我的js代码
$(document).ready(function(){
$("#soul").hide();
$("#btnSubmit").click(function()
{
var position = $(this).position();
var topTo = position.top-10;
alert("position: "+position.top+"\n new position:"+topTo);
$("#soul")
.css({'top' : topTo , 'left' : position.left, 'display' : 'block'})
.show();
});
});
如果您在这里使用 OOP 结构,这就是为什么我有多个具有相同功能的按钮。我在 javascript 部分遇到了困难,我不知道如何做到这一点。
最佳答案
id 属性在页面上应该是唯一的,并且每个按钮都不能重复。
JS 无法处理 #btnSubmit
出现不止一次..
如果代码是由 php 循环生成的,那么您可能需要实现 ids 的编号.. #btnSubmit1
, #btnSubmit2
等等.
要么向按钮添加一个类并将其用作通用选择器,要么尝试 HTML5 data attributes :
echo "<form action='receipt.php?name=$name' method='post'>
<input style='position:absolute; top:$this->yForBuy; left:$this->xForBuy; z-index:4;' type='button' class='purchaseButton' value='Purchase'/>
<input type='hidden' name='bidder' value='$name'>
<input type='hidden' name='item_no' value='$no'>
<input type='hidden' name='item_name' value='$itname'>
<input type='hidden' name='item_price' value='$bid'>
</form>";
<label id='soul' style='position:absolute; z-index:5; color:black;'>purchased!</label>
然后:
$(document).ready(function(){
$("#soul").hide();
$(".purchaseButton").click(function()
{
var position = $(this).position();
var topTo = position.top-10;
alert("position: "+position.top+"\n new position:"+topTo);
$("#soul")
.css({'top' : topTo , 'left' : position.left, 'display' : 'block'})
.show();
});
});
为了制作动画,请为表单添加一个 id 属性(同样必须是唯一的)
<form action='receipt.php?name=$name' id='FORMID' method='post'>
然后在js中:
$(document).ready(function(){
$("#soul").hide();
$(".purchaseButton").click(function()
{
var position = $(this).position();
var topTo = position.top-10;
alert("position: "+position.top+"\n new position:"+topTo);
$("#soul")
.css({'top' : topTo , 'left' : position.left, 'display' : 'block'})
.show();
$('#WHATEVER').animate({
// whatever options here..
complete: function() {
// this will run after the animation has finished
$('#FORMID').submit(); // manually submit the form
}
});
});
});
关于javascript - 相同的按钮具有相同的效果 - jquery OOP,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22651523/