将普通的Javascript转化为jQuery

Question

我有一些涉及点击按钮的代码，如果您已登录，则跳转到下一页；否则，您会收到一个警报。我从来不喜欢HTML中的onClick，因此我想把它改成单击ID并让jQuery完成其魔法。

我了解jQuery的click函数，但我不知道如何将“do_bid（".$val["id"]."）;”与其他Javascript放在一起。如果我没有提供足够的信息或者有官方资源可供使用，请告诉我。

<li class='btn bid' onclick='do_bid(".$val["id"].");'> Bid </li>

<script>
    //Some other Javascript above this
    function do_bid(aid)
    {
        var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>";
        if(loged_in=="")
        {
            alert('You must log in to bid!');
        }
        else
        {
            document.location.href="item.php?id="+aid;
        }
    }
</script>

更新: 这是完整的Javascript代码。我认为之前的回答都没有起作用，因为它们不适合我的Javascript。希望这可以帮到你。

<script language="JavaScript">
    $(document).ready(function(){
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "" + s + "";
}
function CountBack() {
<?
for($i=0; $i<$total_elements; $i++){
echo "myTimeArray[".$i."] = myTimeArray[".$i."] + CountStepper;";
}
for($i=0; $i<$total_elements; $i++){
echo "secs = myTimeArray[".$i."];";
echo "DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,1000000));";
echo "DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));";
echo "DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));";
echo "DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));";
echo "if(secs < 0){
if(document.getElementById('el_type_".$i."').value == '1'){
document.getElementById('el_".$i."').innerHTML = FinishMessage1;
}else{
document.getElementById('el_".$i."').innerHTML = FinishMessage2;";
echo "  }";
echo "}else{";
echo " document.getElementById('el_".$i."').innerHTML = DisplayStr;";
echo "}";
}
?>
if (CountActive) setTimeout("CountBack()", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor, id) {
document.write("<span id='"+ id +"' style='background-color:" + backcolor + "; color:" + forecolor + "'></span>");
}
if (typeof(BackColor)=="undefined")     BackColor = "white";
if (typeof(ForeColor)=="undefined")     ForeColor= "black";
if (typeof(TargetDate)=="undefined")    TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined") DisplayFormat = "%%D%%d, %%H%%h, %%M%%m, %%S%%s.";
if (typeof(CountActive)=="undefined")   CountActive = true;
if (typeof(FinishMessage)=="undefined") FinishMessage = "";
if (typeof(CountStepper)!="number")     CountStepper = -1;
if (typeof(LeadingZero)=="undefined")   LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0) CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
var myTimeArray = new Array();
<?  for($i=0; $i<$total_elements; $i++){?>
ddiff=document.getElementById('el_sec_'+<?=$i;?>).value;
myTimeArray[<?=$i;?>]=Number(ddiff);
<? } ?>
CountBack();
           function do_bid(aid)
    {
        var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>";
        if(loged_in=="")
        {
            alert('You must log in to bid!');
        }
        else
        {
            document.location.href="item.php?id="+aid;
        }
    }
}</script>

- user950779

---

您不应该两次使用class，应该是class='btn bid'。 - James Montagne

Answer 1

如果你想使用jQuery来附加click事件处理程序，你需要先在页面中引入jQuery库，然后尝试下面的代码。

一个元素中不应该有两个class属性。将btn和bid类都移动到一个class属性中。

标记更改。这里我将会话变量呈现为一个数据属性，以便稍后在使用jQuery data方法的click事件处理程序中使用。

PHP/HTML：

echo "<li class='btn bid' data-bid='".$val["id"]."'>Bid</li>";

JS:

$('.btn.bid').click(function(){
    do_bid($(this).data('bid'));
});

如果您不想使用数据属性并将ID渲染到JS变量中，则可以使用以下代码。

var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>";
$('.btn.bid').click(function(){
     if(!loged_in){ 
         alert('You must log in to bid!'); 
     }
     else{
         do_bid(loged_in); 
     }
});

- ShankarSangoli

---

@CaryHartline - 你能告诉我问题出在哪里吗？我可以进行修改以使其按照您的要求工作。 - ShankarSangoli

在标记中，你使用bid作为ID还是添加到类中了？ - ShankarSangoli

Answer 2

首先，您需要使<li>拥有您需要发送的数据，我建议使用数据属性。例如：

echo "<li class=\"btn bid\" data-bid=\"{$val['id']}\">Bid</li>";

接下来，您需要绑定点击事件，并调用javascript方法do_bid，方法如下：

function do_bid(bid){
  //bid code
}
$(function(){
  // when you click on the LI
  $('li.btn.bid').click(function(){
    // grab the ID we're bidding on
    var bid = $(this).data('bid');
    // then call the function with the parameter
    window.do_bid(bid);
  });
});

- Brad Christie

---

为什么要使用 window.？该函数是全局的，因此可以在没有它的情况下访问。 - James Montagne

我倾向于这样做是为了明确，这样当未来需要修改时，我知道定义在哪里。这是个人偏好，但我也倾向于在我的对象中使用this前缀。 - Brad Christie

Answer 3

我会将你试图附加的 id 值作为数据属性添加：

类似这样：

<li class='btn' class='bid' data-id='.$val["id"].'>

然后像这样绑定事件：

$('.bid').click(function(){

    var dataId = $(this).attr('data-id');
    doBid(dataId);


});

- Gabe

Answer 4

假设你有多个按钮，你可以使用 data 属性来存储 ID：

<li class='btn' class='bid' data-id='<?php echo $val["id"]; ?>'>

jQuery：

var clicked_id = $(this).data('id');     // assuming this is the element that is clicked on

- jeroen

Answer 5

如果您仍在寻找答案，我提供了一个解决方法。如果data对您无效，请尝试使用html的id。

这里有一个可行的示例：http://jsfiddle.net/aVLk9/。

- Srihari

Answer 6

你可以将Id存储在一个 data- 属性中，然后使用 jQuery 的 .click 方法。

<li class='btn' class='bid' data-id='".$val["id"]."'>
Bid
</li>
<script>
$(document).ready(function(){
  $("li.bid").click(function(){
    if ("" === "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>") {
      alert('You must log in to bid!');
    }
    else {
      document.location.href="item.php?id=" + $(this).data("id");
    }
  });
});
</script>

- Kevin B