在页面加载时运行 Jquery 函数一次

Question

我有以下 Jquery 函数：

$( document ).ready(function() {
        $(function() {
        $('select[name="CPUmenu"]').change(function(e) {
          let socket = $(this).val();
          $('tbody tr[data-socket]').show();
          if (socket.length) {
            $('tbody tr[data-socket!="' + socket + '"]').hide();
          }
        });
    });
});

其他代码：

CPU 菜单：

$sql = "SELECT name, socket FROM cpu";
$result = $connection->query($sql);

if ($result->num_rows > 0) {
    echo "<select name='CPUmenu'>";
    echo "<option value=''>CPU</option>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        if ($row["name"] == $namehref) {
        echo "<option value='". $row["socket"] . "' selected>".$row["name"]."</option>";    
        } else {
        echo "<option value='". $row["socket"] . "'>".$row["name"]."</option>";
        }
    }
    echo "</select>";
} else {
    echo "0 results";
}

我的表：

$sql = "SELECT name, price, id, socket, ramslots, maxram, chipset FROM motherboard";
$result = $connection->query($sql);

if ($result->num_rows > 0) {
    echo "<table id='myTable'><thead><tr><th>Motherboard</th><th>Price</th><th>Socket</th><th>Chipset</th><th>Ram Slots</th><th>Max Ram</th></tr></thead>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tbody><tr data-socket='". $row['socket'] . "'><td><a href='https://au.pcpartpicker.com/product/" . $row["id"] . "' target='_blank'>" . $row["name"] . "</a></td><td>" . $row["price"] . "</td><td>" . $row["socket"] . "</td><td>" . $row["chipset"] . "</td><td>" . $row["ramslots"] . "</td><td>" . $row["maxram"] . "</td></tr></tbody>";
    }
    echo "</table>";
} else {
    echo "0 results";
}

我刚试过这个，但根本不起作用

但是它只在我在“CPUmenu”中选择一个新选项时运行，我希望它在页面打开和加载时也运行一次。

谢谢

Answer 1

您可以在页面加载时触发更改：

$('select[name="CPUmenu"]').tigger('change');

请注意： $( document ).ready(function() {... 和 $(function() {... 基本相同。您可以参考document-readyfunction-vs-function了解更多信息。

演示：

$(function() {
   $('select[name="CPUmenu"]').change(function(e) {
      let socket = $(this).val();
      $('tbody tr[data-socket]').show();
      if (socket.length) {
        //$('tbody tr[data-socket!="' + socket + '"]').hide();
      }
      alert('change trigger');
   });
   $('select[name="CPUmenu"]').trigger('change'); // trigger here
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="CPUmenu">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Answer 2

首先，$(document).ready( ... ) 和嵌套的$(function() { ... }) 是redundant。

您可以将change 函数移出处理程序并立即调用它：

$(document).ready(function() {
  const menu = $('select[name="CPUmenu"]');
  const menuChange = (function(e) {
    let socket = $(this).val();
    $('tbody tr[data-socket]').show();
    if (socket.length) {
      $(`tbody tr[data-socket!="${socket}"]`).hide();
  }).bind(menu.get());
  menuChange();
  $('select[name="CPUmenu"]').change(menuChange);
});

Answer 3

我建议拆分您想要用完的功能，然后手动触发它。例如：

$( document ).ready(function() {

  // This is the function, ready to be called
  function updateSocket() {
    let socket = $(this).val();
    $('tbody tr[data-socket]').show();
    if (socket.length) {
      $('tbody tr[data-socket!="' + socket + '"]').hide();
    }
  }

  // Save the element for usage later
  let dropdownElement = $('select[name="CPUmenu"]')

  // Set up the event listener for the dropdown
  dropdownElement.change(updateSocket);

  // Also call it manually.
  updateSocket.bind(dropdownElement)();
});

编辑：我为此解决方案添加了绑定。否则，$(this) 的上下文将不正确。