在按鈕單擊事件上呼叫函式而不是按id

大家好，我在兩個帶有#ID 的按鈕上使用了一個函式，問題是我必須撰寫兩次相同的函式，所以我想用 Onclick 呼叫它，這樣我只能撰寫一次函式。請幫助我是初學者

紐扣

<a name="depIN" id="depIN" class="btn btn-primary" type="button">
<a name="depIN1" id="depIN1" class="btn btn-primary" type="button">

代碼

$(document).ready(function(){
    $('#depIN').click(function(){
    let network = '';
    if ($('#depsTo').val()){
      network = $('#depsTo').val();
      networkDesign = "";
   
      for (i=0;i<network.length;i  ){
    temp = "<span style = 'border:3px dotted #399bff;'>"   network[i]   "</span>";
    if (i !== network.length-1){
        temp  = "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>"
    }
    network[i] = temp;
}

      network = network.toString().replaceAll(',','');

    $('#networkHeading').html(network);

    }
    });
});

另一個相同的功能但不同的按鈕 ID

$(document).ready(function(){
    $('#depIN1').click(function(){
    let network = '';
    if ($('#depsTo').val()){
      network = $('#depsTo').val();
      networkDesign = "";
   
      for (i=0;i<network.length;i  ){
    temp = "<span style = 'border:3px dotted #399bff;'>"   network[i]   "</span>";
    if (i !== network.length-1){
        temp  = "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>"
    }
    network[i] = temp;
}

      network = network.toString().replaceAll(',','');

    $('#networkHeading').html(network);

    }
    });
});

uj5u.com熱心網友回復：

你可以像這樣使用它。

<a id="myLink" title="Click to do something" href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text </a>

return false 將阻止瀏覽器跟蹤鏈接

uj5u.com熱心網友回復：

你可以這樣做。我也修改了代碼以使其按要求作業（據我了解，您要實作的目標）

function addHtml() {
  let network = '';
  if ($('#depsTo').val()) {
    network = $('#depsTo').val();
    networkDesign = "";
    for (i = 0; i < network; i  ) {
      temp = "<span style = 'border:3px dotted #399bff;'>"   i   "</span>";
      if (i !== network - 1) {
        temp  = "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>";
      }
      networkDesign  = temp;
    }

    $('#networkHeading').html(networkDesign);

  }
}

<link href="https://getbootstrap.com/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a name="depIN" class="btn btn-primary" type="button" onclick="addHtml();return false;">Click depIN</a>
<br>
<br>
<a name="depIN1" class="btn btn-primary" type="button" onclick="addHtml();return false;">Click depIN1</a>
<br>
<br>
<input type="text" value="5" id="depsTo"><!-- I assumed it just to use your code to show you the fianl working -->
<br>
<br>
<div id="networkHeading"></div>

uj5u.com熱心網友回復：

如果單擊事件是相同的代碼，您可以使用 jQuery 選擇器starts with；$('[id^=sameIdStartWith]') 它將觸發所有以 depIN、depIN2、depIN3 等開頭的 ID

演示：https ://jsfiddle.net/yyene/n94au3gt/4/

$(document).ready(function(){
    $('[id^=depIN]').click(function(){
        let network = '';
        if ($('#depsTo').val()){
            network = $('#depsTo').val();
            networkDesign = "";

            for (i=0;i<network.length;i  ){
                temp = "<span style = 'border:3px dotted #399bff;'>"   network[i]   "</span>";
                if (i !== network.length-1){
                    temp  = "<bold style = 'color : #d77300;'> <i class='fa fa-long-arrow-right'></i></bold>"
                }
                network[i] = temp;
            }
            
            network = network.toString().replaceAll(',','');
            $('#networkHeading').html(network);
        }
    });
});

uj5u.com熱心網友回復：

有很多方法：
HTML代碼：

<a id="b1" class="btnClick" type="button">B1M</a>
<a id="b2" class="btnClick" type="button">B2M</a>

一是：你可以在選擇器jQuery中添加多個id。

var b1 = $("#b1"), b2 = $("#b2");

b1.add(b2).click(function(){
   alert('clicked', this.id)
})

這是鏈接：小提琴

另一個是：您可以為所有標簽賦予相同的類

jQuery代碼：

$(".btnClick").click(function(){
   alert('clicked', this.id)
})

這是另一個鏈接：小提琴

標籤：jQuery

上一篇：單擊內部鏈接時防止包裝器的單擊事件

下一篇：即使未選中，如何在單選按鈕中獲取資料