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>

Answer 1

如果要使用jQuery附加click事件处理程序。您需要首先在页面中包含jQuery库，然后尝试以下代码。

元素中不应该有2个类属性。将btn和bid类同时移动到一个类属性中。

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

PHP / HTML：

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

JS：

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

如果您不想使用data属性并将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); 
     }
});

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);
  });
});

Answer 3

我会将您尝试追加的ID值添加为数据属性：

类似的东西：

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

然后像这样绑定事件：

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

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


});

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

Answer 5

您可以将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>

Answer 6

如果您仍在寻找答案，我会提出一个解决方法。如果data不适合您，请尝试使用html id。

这里有一个工作示例：http://jsfiddle.net/aVLk9/

将常规Javascript转换为jQuery

6 个答案: