设置按钮以运行不同的脚本

Question

我有一个包含2个表的页面，每行都有一个“选择”按钮，需要在单击时运行脚本。我已经使用了第一个表，但无法确定如何使用这两个表。

以下是表格的HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>

<div>

  <br />
  <table class="table table-condensed table-striped table-bordered">
    <thead>
      <th scope="col">Code</th>
      <th scope="col">Description</th>
      <th class="text-center" scope="col">Select</th>
    </thead>
    <tbody>

      <tr class="" id="SK5543333">
        <td>BJ2345</td>
        <td>Laptop 13 inch display</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>
      <tr class="" id="SK3241235213">
        <td>AZ77656</td>
        <td>Laptop 15 inch display</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>


    </tbody>
  </table>

</div>


<h2>Select Accessories</h2>

<div>

  <br />
  <table class="table table-condensed table-striped table-bordered">
    <thead>
      <th scope="col">Code</th>
      <th scope="col">Description</th>
      <th class="text-center" scope="col">Select</th>
    </thead>
    <tbody>

      <tr class="" id="SK3412541">
        <td>MM42412341</td>
        <td>Mouse</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>
      <tr class="" id="SK95390485">
        <td>KB42341243</td>
        <td>Keyboard</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>
      <tr class="" id="SK42353">
        <td>USB421341234</td>
        <td>USB Adapter</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>
      <tr class="" id="SK543647585">
        <td>PWR363456534</td>
        <td>POWER ADAPTER</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>
    </tbody>
  </table>

</div>

当用户从top / Main表中选择时，我需要运行不同的脚本，当用户从bottom / Accessories表中选择时，我需要运行另一个脚本。以下是在任一表中单击“选择”按钮时要运行的2个脚本（顶部表的第一个脚本和第二个表的第二个脚本）：

$(document).ready(function() {
  $('button.btn-success:not([type="submit"])').click(function() {
    // Remove the classes from all of the TR elements
    $(this).parents('table').find('tr').removeClass('success warning danger');
    var productID = $(this).closest('tr').attr('id');
    console.log(productID);
    $this = $(this);
    // add the success class to the row and remove the danger class if it was present
    $this.closest('tr').addClass("success");
    $this.closest('tr').removeClass("danger");
    // update the hidden input with the selected productID
    $('#productID').val(productID);
  });
});


$(document).ready(function() {
  $('button.btn-success:not([type="submit"])').click(function() {
    var itemID = $(this).closest('tr').attr('id');
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateAccessories.php', {
      itemID: itemID
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        var ajaxError = (data.text);
        var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact the Help Desk';
        $this.closest('tr').addClass("warning");
        $('#alert_ajax_error').html(errorAlert);
        $("#alert_ajax_error").show();
        return; // stop executing this function any further
      } else {
        if ($this.closest('tr').hasClass("success")) {
          $this.closest('tr').removeClass("success");
        } else {
          $this.closest('tr').addClass("success");
        }
      }
    }).fail(function(xhr) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Help Desk';
      $this.closest('tr').addClass("warning");
      $('#alert_ajax_error').html(ajaxError);
      $("#alert_ajax_error").show();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

目前，点击任一按钮都会运行我可以理解的两个脚本，因为它们都符合以下条件：

$('button.btn-success:not([type="submit"])').click(function() {

但是我没有足够的经验知道如何进行必要的更改让每个按钮在这里运行不同的脚本？

Answer 1

区分按钮的一种非常基本的方法是向它们添加一个名为“id”的属性。

<button id="button1" type="button" class="btn btn-success btn-sm">Select</button>
<button id="button2" type="button" class="btn btn-success btn-sm">Select</button>

现在您可以像这样引用每个：

$('#button1').click(function() { ...
$('#button2').click(function() { ...

Answer 2

如果您可以更改标记，请在按钮中为main和accessories添加另一个类，并执行$('button.main')和$('button.accessories')而不是$('button.btn-success:not([type="submit"])')

如果没有，那么你需要能够辨别彼此。

$(document).ready(function() {
  $('button.btn-success:not([type="submit"])').click(function(e) {
    var  t = $(e.target).parent().parent().parent().parent().parent().prev()[0].innerHTML;
    if(t.indexOf("Main") !== -1) {
      // Has MAIN - put your main code in here
      console.log("main stuff");
    } else if (t.indexOf("Accessories") !== -1) {
      // It's Accessories - put your accessories code in here
      console.log("accessories stuff");
    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h2>Select Main</h2>
<div>
  <br />
  <table class="table table-condensed table-striped table-bordered">
    <thead>
      <th scope="col">Code</th>
      <th scope="col">Description</th>
      <th class="text-center" scope="col">Select</th>
    </thead>
    <tbody>

      <tr class="" id="SK5543333">
        <td>BJ2345</td>
        <td>Laptop 13 inch display</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>
      <tr class="" id="SK3241235213">
        <td>AZ77656</td>
        <td>Laptop 15 inch display</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>


    </tbody>
  </table>

</div>


<h2>Select Accessories</h2>

<div>

  <br />
  <table class="table table-condensed table-striped table-bordered">
    <thead>
      <th scope="col">Code</th>
      <th scope="col">Description</th>
      <th class="text-center" scope="col">Select</th>
    </thead>
    <tbody>

      <tr class="" id="SK3412541">
        <td>MM42412341</td>
        <td>Mouse</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>
      <tr class="" id="SK95390485">
        <td>KB42341243</td>
        <td>Keyboard</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>
      <tr class="" id="SK42353">
        <td>USB421341234</td>
        <td>USB Adapter</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>
      <tr class="" id="SK543647585">
        <td>PWR363456534</td>
        <td>POWER ADAPTER</td>
        <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
      </tr>
    </tbody>
  </table>

</div>