この記事は、JavaScript がショッピング カートの數(shù)量を増減する関數(shù)を?qū)g裝するときに、ページ內(nèi)の最初の要素にのみ影響するという問(wèn)題を解決することを目的としています。一般的なエラーの原因を分析し、イベント委任と DOM トラバーサルに基づいた最適化ソリューションを提供することで、開(kāi)発者が再利用可能でシンプルかつ効率的なショッピング カート數(shù)量制御機(jī)能を?qū)g裝できるように支援します。同時(shí)に、効果的な HTML 構(gòu)造を記述することの重要性も強(qiáng)調(diào)されます。

ショッピング カートや製品詳細(xì)ページを開(kāi)発する場(chǎng)合、數(shù)量を増減する機(jī)能を?qū)g裝する必要があることがよくあります。よくある間違いは、ページ上に複數(shù)の商品がある場(chǎng)合、JavaScript コードが最初の商品に対してのみ機(jī)能することです。これは通常、コードが最初の要素のみを選択し、複數(shù)の要素を正しく処理しないことが原因です。この記事では、この問(wèn)題を調(diào)査し、より効率的で再利用可能な解決策を提供します。

問(wèn)題分析

最初のコードでは、querySelectorAll を使用してすべてのボタンを取得しようとしましたが、それでも問(wèn)題が発生しました。主な理由は次のとおりです。

1. セレクターの問(wèn)題:番號(hào)付きクラス名 (.pqt-plus1 など) を使用すると、コードは最初の要素のみを選択します。
2. 変數(shù)のスコープ:要素ごとに獨(dú)立変數(shù)が作成されるため、コードの再利用性が低くなり、メンテナンスが困難になります。

解決策: イベント委任と DOM トラバーサル

より洗練された解決策は、イベント委任と DOM トラバーサルを使用することです。このアプローチにより、ボタンごとにイベント リスナーを追加する必要がなくなり、パフォーマンスとコードの保守性が向上します。

HTML構(gòu)造の最適化:

まず、HTML 構(gòu)造を最適化して操作しやすくする必要があります。クラス名から數(shù)値接尾辭を削除し、汎用クラス名を使用します。同時(shí)に、データ屬性を使用して増加値と減少値を保存します。また、HTML構(gòu)造內(nèi)のdivがspanタグ內(nèi)に配置できない問(wèn)題を修正しました。

 <div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    ボタン>
    <span class="カートボタン">
      <span class="added">0</span>
    スパン>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    ボタン>
  スパン>
</button></span></button></span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    ボタン>
    <span class="カートボタン">
      <span class="added">0</span>
    スパン>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    ボタン>
  スパン>
</button></span></button></span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    ボタン>
    <span class="カートボタン">
      <span class="added">0</span>
    スパン>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    ボタン>
  スパン>
</button></span></button></span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right">
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="feather-minus"></i> - 
    ボタン>
    <span class="カートボタン">
      <span class="added">0</span>
    スパン>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus" data-inc="1"> 
      <i class="feather-plus"></i>   
    ボタン>
  スパン>
</button></span></button></span>
</div>

JavaScript コード:

 document.querySelectorAll(".btn-sm").forEach(btn => {
  btn.addEventListener('クリック', e => {
    let total = e.target.closest('.pls-moins').querySelector('.added');
    total.textContent = Math.max(0, parseInt(total.textContent, 10) parseInt(e.currentTarget.dataset.inc, 10));
  });
});

コードの説明:

1. document.querySelectorAll(".btn-sm").forEach(btn => { ... }); : クラス名 .btn-sm を持つすべてのボタンを選択し、各ボタンにイベント リスナーを追加します。
2. e.target.closest('.pls-moins') : e.target は、イベントをトリガーした要素 (つまり、クリックされたボタン) です。 Closest('.pls-moins') は、クラス .pls-moins を持つ最も近い祖先要素まで検索します。
3. .querySelector('.added') : 見(jiàn)つかった .pls-moins 要素の中から、數(shù)量を表示するクラス名 .added の要素を探します。
4. parseInt(total.textContent, 10) : テキスト コンテンツの量を整數(shù)に変換します。 10 は 10 進(jìn)數(shù)を表します。
5. parseInt(e.currentTarget.dataset.inc, 10) : クリックされたボタンの data-inc 屬性の値を取得し、それを整數(shù)に変換します。 e.currentTarget は、イベント リスナーがバインドされている要素 (ボタンなど) を指します。
6. Math.max(0, ...) : 數(shù)量が 0 未満にならないようにしてください。

要約する

イベント委任と DOM トラバーサルを使用すると、複數(shù)の要素を処理するための、より簡(jiǎn)潔で保守しやすい JavaScript コードを作成できます。このアプローチにより、コードの効率が向上するだけでなく、拡張や変更も容易になります。このソリューションを?qū)g裝するには、有効な HTML 構(gòu)造を記述することが重要であることに注意してください。番號(hào)付きのクラス名の使用を避け、一般的なクラス名とデータ屬性を使用して関連情報(bào)を格納します。最後に、HTML 構(gòu)造が有効であることを確認(rèn)してください。

以上が最初の要素にのみ有効な JavaScript ショッピング カート數(shù)量増減ボタンの解決策の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。