通常のJavascriptをjQueryに入れます

Question

ボタンをクリックすると、ログインして次のページに行くか、ログアウトしてアラートが表示されるコードがあります。私はHTMLの中でonClickが好きではなかったので、idをクリックしてjQueryにその魔法をかけることにしたいと思います。

私はjQueryのクリック機能を理解していますが、私は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> 

UPDATE：これは、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

click jQueryを使用してイベントハンドラを添付したい場合は、最初にjQueryライブラリをページに組み込み、以下のコードを試してみる必要があります。

要素内に2つのクラス属性を持つべきではありません。 btnクラスとbidクラスの両方を1つのクラス属性に移動します。

マークアップの変更。ここでは、セッション変数を、後でclickイベントハンドラ内でjQuery dataメソッドを使用して使用するデータ属性にレンダリングしています。

PHP/HTML：

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

JS：

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

あなたはデータ属性を使用して、あなたは以下のコードを使用することができますJS変数にIDをレンダリングしたくない場合。

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

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


}); 

Answer 2

私はあなたのデータ属性として追加しようとしているid値を追加しますこれらのボタンが複数あると仮定すると、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 3

：次に、このようなイベントをバインド

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

：

のような何か：

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 4

あなたはjQueryの.clickメソッドを使用し、その後、data-属性にIDを保存することができます。

<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 5

まず、あなたは<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 6

を、私は回避策をとった。 dataがお役に立てない場合は、idをお試しください。

実施例はここにある：http://jsfiddle.net/aVLk9/