2

私のコードは本質的にこれです：

<a href="javascript:void(0);" onClick="viewServices(1)">Services</a>
<a href="javascript:void(0);" onClick="viewServices(43)">Services</a>
<a href="javascript:void(0);" onClick="viewServices(16)">Services</a>
...

ビューサービスの場所:

function viewServices(stylistID){
    alert(stylistID);
}

ただ、次の 2 つの問題があります。

  1. 私はインライン Javascript を使用していますが、これはお勧めできません。
  2. リンクをクリックしても、関数が呼び出されません。

また、JQuery および Bootstraps .js ファイルをインポートしていること、および各リンク (および関連付けられた ID) が動的に読み込まれることにも言及する必要があります。

インライン JavaScript を削除できるようにするだけでなく、動的にロードされたリンクの「ID」を関数に渡す関数を呼び出せるようにする確立された方法はありますか?

** 編集

各リンクは、各行の情報が完了するまで繰り返される mysqli_fetch_row 中に生成されます。viewServices(#) の数字は実際には

<?php echo $row[0]; ?>
4

3 に答える 3

6

解決策は、データ属性とクラスを利用して、このようにhtmlをリファクタリングすることです

<a href="#" data-service="16" class="service-link">Services</a>

次に、jQuery

$('.service-link').on('click', function(e){
  e.preventDefault(); // Stop default behavior of clicking link
  alert(this.data('service')); // Retrieve the service id and use it
});
于 2013-11-09T03:16:28.153 に答える
2

あなたが使用することができます

<a class="viewServices" data-arg="1">Services</a>
<a class="viewServices" data-arg="43">Services</a>
<a class="viewServices" data-arg="16">Services</a>

と

// viewServices is not defined here
(function() { // viewServices is defined inside here
    function viewServices(arg) { /* ... */ }
    function viewServicesCaller() {
        viewServices(this.getAttribute('data-arg'));
    }
    var els = document.getElementsByClassName('viewServices');
    for(var i=els.length-1; i>=0; --i) {
        els[i].onclick = viewServicesCaller;
    }
})();

おそらく、viewServicesクロージャー内で定義されているため、コードが機能しないため、グローバルではありません。次に、そのクロージャーにイベント リスナーを追加する必要があります。

于 2013-11-09T03:18:08.023 に答える
1

コンソールに表示されるエラーは何ですか?

JavaScript はページの head セクションにありますか? そうでない場合は、それを試してください。

そうしたくない場合は、JavaScript コードがリンクの前にあることを確認してください。

幸運を。

jQueryの場合、これを行うことができます：

<a class="services" data-service="1">Services</a>
<a class="services" data-service="43">Services</a>
<a class="services" data-service="16">Services</a>


$(".services").click(function(link){
  link.preventDefault();
  alert(this.data("service-id"));
});
于 2013-11-09T03:17:48.740 に答える