<a>を使って関数を実行する（）

Question

私は望んでいる関数をこのリンクと呼ぶのだろうか？

<a href="http://catalog.bitsltd.us/power_strips#replaced" onclick="document.getElementById('caShip').function caShip()" id="caShip">Some Text</a> 

これは私が電話したい機能です...誰も私になぜそれも動作していないと教えてもらえますか？リンクは、それが同じページでHREF、そしてIDに行くんクリックされたが、それは< div要素で新しいHTML、と> <代わるものではありません

<script type="text/javascript"> 
$(function caShip(){ 
    $('#caShip').replaceWith('Some HTML (the new HTML has an id of replaced)'); 
}); 
</script> 

>？

UPDATE：

JS

<script type="text/javascript"> 
$(document).ready(function(){ 
    //Hide Canadian Information 
    $('.locationDiv').hide(); 

    //bind the links click events 
    $('.locLink').click(function(){  
     $('#1').hide(); 
     $('#desc_' + $(this).attr('title')).show(); 
    }); 
});  

</script> 

HTML私は、私はそれなしで必要なものを達成することができますので、私はCSSを使用していない

<a href="javascript:void(0);" title="can" class="locLink" id="1">Canadian Customers Click Here Before Ordering!</a> 
<div id="desc_can" class="locationDiv"> 
    <table class="contentpaneopen"> 
     <tr> 
     <td class="contentheading" width="100%">Attention Canadian Customers! 
     </td> 
     </tr> 
    </table> 

    <table class="contentpaneopen"> 
     <tr> 
     <td valign="top" > 
     <span class="body">Please note that there are fees associated with shipping to Canada from the US that are <b><u><i><font color="red">NOT</font></i></u></b> included in the cost of the shipping or the cost of the unit. These cost are to be paid for by the purchaser. Here are some tips for shipping to Canada: 
     <br /> 
     <br /> 
     -USPS methods are cheap but very unreliable. <b>Border fees</b> are not charged using USPS, only UPS or Fed Ex (which are the most reliable). 
     <br /> 
     -<b>Customs fees</b> can sometime run <b>up to 50%</b> of the purchase price (UPS/FedEx). 
     <br /> 
     -Smart Strips are available from a Canadian dealer. Visit our <a href="index.php?Itemid=146" title="Store Locator" target="_blank">Store Locator</a> to find a local seller. 
     <br /> 
     -Customers with a UPS or FedEx account may ship on their account and assume all fees with no delays. 
     <br /> 
     -Canadian customers selecting UPS or FedEx will have to pick the package up at their local station and pay the fees. So you order it online, but still have to drive and pay to pick it up unless you used your own UPS/Fed Ex account.</span> 
     </td> 
     </tr> 
    </table> 
</div> 

：これはWORKINGコードです。これで私を助けようとしていたみんなに感謝します!!!

Answer 1

HTML

<a href="#replaced" id="caShip">Some Text</a> 

...これを試してみてくださいJS

$('#caShip').click(function(){ 
    $(this).text('Some HTML (the new HTML has an id of replaced)'); 
}); 

Answer 2

<a href="http://catalog.bitsltd.us/power_strips#replaced" onclick="caShipFunc();" id="caShip">Some Text</a> 


<script type="text/javascript"> 
    function caShipFunc(){ 
     $('#caShip').replaceWith('Some HTML (the new HTML has an id of replaced)'); 
    } 
</script> 

Answer 3

号

はインラインonclick属性を取り除き、そしてちょうどこの行いなさい：あなたはインラインそれをしたいなかった場合

<script type="text/javascript"> 
$(function(){ 
    $('#caShip').click(function() { 
     $(this).replaceWith('<div id="' + this.hash.slice(1) + '">some HTML</div>'); 
      // uncomment the next line if you want the hash to actually appear. 
     // window.location.hash = this.hash; 

      // prevent the page from reloading 
     return false; 
    }); 
}); 
</script> 

、あなただけのこの操作を行うことができます：

<a href="http://catalog.bitsltd.us/power_strips#replaced" onclick="caShip.call(this);" id="caShip">Some Text</a> 


<script type="text/javascript"> 
function caShip(){ 
    $(this).replaceWith('<div id="' + this.hash.slice(1) + '">some HTML</div>'); 
} 
</script> 

を

---

EDIT：アンカー要素のhashを使用して、そのIDを持つ新しい要素を作成するように修正しました。これは、置換に使用されたテキストが暗示しているようだからです。

Answer 4

あなたはjQueryのを使用しているので、あなたがこのような何か行う必要があります。

<a href="http://catalog.bitsltd.us/power_strips#replaced" id="caShip">Some Text</a> 

jQueryの

<script type="text/javascript"> 
$(function(){  
    $('#caShip').click(function() { 
     if($(this).attr('href').indexOf("#") != -1) { 
      $('#caShip').replaceWith('<div>Test</div>'); 
     } 
    }); 
}); 
</script> 

EDIT：はあなたのコメントに対処するためのjQueryを更新しましたが。これは私の非常に基本的なテストで動作します。

Answer 5

あなたはjQueryを誤って使用していて、実際に関数を宣言していません。

書き込み$(function someName() { ... })は、名前付き関数式を作成し、$関数に渡します。 再利用可能な関数を宣言しません。 someName()を書くことはできません。

さらに、onclickハンドラでの呼び出しは完全に間違っています。
関数を呼び出すには、関数を呼び出すだけです（onclick="caShip();"）。 getElementByIdと組み合わせることはできません。

これを行うための正しい方法は、jQueryのを使用してclickハンドラを追加することです：

$(function() { 
    $('#caShip').click(function() { 
     $(this).replaceWith('Some HTML (the new HTML has an id of replaced)'); 
    }); 
});