使用 <a> 运行 function()

Question

我想知道这个链接会调用我想要的函数吗？

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

这是我要调用的函数...谁能告诉我为什么它也不起作用？

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

当链接被点击时，它会转到href，它是同一个页面和一个ID，但它不会用新的HTML替换，它是一个

？

更新：这是工作代码：

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

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

我没有使用 CSS，因为没有它我可以实现我所需要的。感谢所有试图帮助我的人！！！。

【问题讨论】：

Answer 1

没有。

去掉内联的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>

---

编辑： 已修复它以使用 Anchor 元素中的 hash 创建具有该 ID 的新元素，因为用于替换的文本似乎暗示了这一点。

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

由于你使用的是 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>

编辑： 更新了 jQuery 以解决您的评论。这适用于我非常基本的测试。

Answer 4

试试这个...

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

http://jsfiddle.net/8bUKs/1/

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