觸發onclick事件時獲取$(this)-有解無憂

大多數時候我使用 jQuery 事件處理程式來做 CSS 樣式。這是我第一次嘗試通過使用 HTML 事件屬性來實作這一點。這是我的代碼：

$('.navBtn').on('click', function() {
  var length = $(this).closest('.videoList').find('.slider').length;
  alert(`length A = ${length}`);
});

function btnClick() {
  var length = $(this).closest('.videoList').find('.slider').length;
  alert(`length B = ${length}`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="videoList">
  <div class="navBtn" onclick="btnClick()">Button</div>
  <div class="slider">
    <ul>
      <li>items</li>
    </ul>
  </div>
</section>

長度 A 的結果是 1，長度 B 是 0。我想這可能是我將 jQuery 與其他東西混合使用。但我想知道更多細節。請向我解釋或顯示資訊。謝謝！

uj5u.com熱心網友回復：

您可以傳遞this給函式：

onclick="btnClick(this)"

然后函式只接受它作為引數：

function btnClick(element) {

例如：

$('.navBtn').on('click', function() {
  var length = $(this).closest('.videoList').find('.slider').length;
  alert(`length A = ${length}`);
});

function btnClick(element) {
  var length = $(element).closest('.videoList').find('.slider').length;
  alert(`length B = ${length}`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="videoList">
  <div class="navBtn" onclick="btnClick(this)">Button</div>
  <div class="slider">
    <ul>
      <li>items</li>
    </ul>
  </div>
</section>

但這是朝著錯誤方向邁出的一步。如果您使用 jQuery，請使用 jQuery。代替 jQuery，您仍然可以在代碼中附加事件處理程式：

$('.navBtn').on('click', function() {
  var length = $(this).closest('.videoList').find('.slider').length;
  alert(`length A = ${length}`);
});

function btnClick() {
  var length = $(this).closest('.videoList').find('.slider').length;
  alert(`length B = ${length}`);
}

document.querySelector('.navBtn').addEventListener('click', btnClick);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="videoList">
  <div class="navBtn">Button</div>
  <div class="slider">
    <ul>
      <li>items</li>
    </ul>
  </div>
</section>

基本上，一般盡量避免使用行內事件處理程式。將標記與代碼分開，并在代碼中分配事件處理程式。

uj5u.com熱心網友回復：

您不需要事件屬性和 jQuery 事件，因此只需使用 jQuery 即可。onclick=不鼓勵使用類似的事件屬性。此外，您應該使用<input type="range">for 滑塊。

$('.navBtn').on('click', function() {
  var length = $(this).closest('.videoList').find('.slider').val();
  alert(`length A = ${length}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="videoList">
  <button class="navBtn">Button</button>
  <input class="slider" type="range" min="1" max="100" />
</section>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/531662.html

標籤：javascripthtmljQuery

上一篇：如何通過檔案名從表中選擇音頻檔案，以便只有一個主要音頻元素播放所選檔案的音頻？

下一篇：在QML中突出顯示圓段的最佳方法？