javascript - 将类名添加到特定类的所有实例

Question

我有 3 个部分共享相同的代码。

当我在第 1 部分中选择一种货币时，我希望在第 2 部分和第 3 部分中也选择相同的货币。此外，当我通过单击一个部分中的“显示更多”链接来展开货币列表时，我希望在每个部分中都展开该列表。我已经尝试过以下方法，但它只影响一个部分，并且显示更多链接似乎并非一直有效。任何想法我做错了什么？

jQuery(document).ready(function() {
  var $ = jQuery;

  $('.currency-btn').off('click').on('click', function(event) {
    if (event) {
      event.preventDefault();
    }
    var currency = this.id ? this.id.split('-')[0] : null;
    var $btn = $(this);
    if (currency && $('.' + currency + '-btn').length) {

      $('.currencies').hide();
      $('.currency-' + currency).show();

      $('.currency-btn').removeClass('active');
      $btn.addClass('active');

      $btn.show().prev('span').show();
      $('a.currency-more').off('click').on('click', function(e) {
        e.preventDefault();
        $(this).prev('span').remove().end().remove();
        $('a.currency-btn').show().prev('span').show();
      });
    }
  });
});

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sec1">
  <div class="currency-btn-section">
    <h4>Section 1</h4>
    <b>CURRENCY:</b>
    <a href="#" id="" class="usd-btn currency-btn active">US$</a>
    <span>|</span> <a href="#" id="" class="gbp-btn currency-btn">GBP£</a>
    <span>|</span> <a href="#" id="" class="eur-btn currency-btn">EUR€&lt;/a>
    <span style="display:none">|</span> <a style="display:none" href="#" id="" class="aud-btn currency-btn">AUS$</a>
    <span style="display:none">|</span> <a style="display:none" href="#" id="" class="cad-btn currency-btn">CAN$</a>
    <span style="display:none">|</span> <a style="display:none" href="#" id="" class="mxn-btn currency-btn">MEX$</a>
    <span style="display:none">|</span> <a style="display:none" href="#" id="" class="sgd-btn currency-btn">SGP$</a>
    <span class='currency-more'>|</span>
    <a href="#" class="currency-more">Show more&hellip;</a>
  </div>
</div>
<div class="sec2">
  <h4>Section 2</h4>
  <b>CURRENCY:</b>
  <a href="#" id="" class="usd-btn currency-btn active">US$</a>
  <span>|</span> <a href="#" id="" class="gbp-btn currency-btn">GBP£</a>
  <span>|</span> <a href="#" id="" class="eur-btn currency-btn">EUR€&lt;/a>
  <span style="display:none">|</span> <a style="display:none" href="#" id="" class="aud-btn currency-btn">AUS$</a>
  <span style="display:none">|</span> <a style="display:none" href="#" id="" class="cad-btn currency-btn">CAN$</a>
  <span style="display:none">|</span> <a style="display:none" href="#" id="" class="mxn-btn currency-btn">MEX$</a>
  <span style="display:none">|</span> <a style="display:none" href="#" id="" class="sgd-btn currency-btn">SGP$</a>
  <span class='currency-more'>|</span>
  <a href="#" class="currency-more">Show more&hellip;</a>
</div>
</div>
<div class="sec3">
  <h4>Section 3</h4>
  <b>CURRENCY:</b>
  <a href="#" id="" class="usd-btn currency-btn active">US$</a>
  <span>|</span> <a href="#" id="" class="gbp-btn currency-btn">GBP£</a>
  <span>|</span> <a href="#" id="" class="eur-btn currency-btn">EUR€&lt;/a>
  <span style="display:none">|</span> <a style="display:none" href="#" id="" class="aud-btn currency-btn">AUS$</a>
  <span style="display:none">|</span> <a style="display:none" href="#" id="" class="cad-btn currency-btn">CAN$</a>
  <span style="display:none">|</span> <a style="display:none" href="#" id="" class="mxn-btn currency-btn">MEX$</a>
  <span style="display:none">|</span> <a style="display:none" href="#" id="" class="sgd-btn currency-btn">SGP$</a>
  <span class='currency-more'>|</span>
  <a href="#" class="currency-more">Show more&hellip;</a>
</div>
</div>

标签： javascripthtmljquery

Answer 1

检查此编辑，您在选择许多元素时未使用的主要错误。并且您只需要在通过元素属性传递数据时更加简单，例如向currency按钮添加属性。

$(document).ready(function () {

    $('.currency-btn').each((index, el) => {

        $(el).off('click').on('click', function (event) {
   
            if (event) {
                event.preventDefault();
            }
    
            var $btn = $(this);
            var currency = $btn.attr('currency');

            if (currency && $('.' + currency + '-btn').length) {

                $('.currency-btn').removeClass('active');
                var sameButtons = $(`[currency="${currency}"]`)
                sameButtons.each((i, bttn)=>{
                    $(bttn).addClass('active')
                })

        
            }
        })

    });


    $('a.currency-more').each((i, btn)=>{
        $(btn).off('click').on('click', function (e) {
            e.preventDefault();

            $('a.currency-more').css('display', 'none');
            $('.currency-btn').css('display', 'inline-block');
        });
    }) 
});

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sec1">
    <div class="currency-btn-section">
        <h4>Section 1</h4>
        <b>CURRENCY:</b>
        <a href="#" id="" currency="usd" class="usd-btn currency-btn active">US$</a>
        <span>|</span> <a href="#" currency="gbp" id="" class="gbp-btn currency-btn">GBP£</a>
        <span>|</span> <a href="#" currency="eur" id="" class="eur-btn currency-btn">EUR€&lt;/a>
        <span style="display:none">|</span> <a style="display:none" href="#" currency="aud" id=""
            class="aud-btn currency-btn">AUS$</a>
        <span style="display:none">|</span> <a style="display:none" href="#" currency="cad" id=""
            class="cad-btn currency-btn">CAN$</a>
        <span style="display:none">|</span> <a style="display:none" href="#" currency="mxn" id=""
            class="mxn-btn currency-btn">MEX$</a>
        <span style="display:none">|</span> <a style="display:none" href="#" currency="sgd" id=""
            class="sgd-btn currency-btn">SGP$</a>
        <span class='currency-more'>|</span>
        <a href="#" class="currency-more">Show more&hellip;</a>
    </div>
</div>
<div class="sec2">
    <h4>Section 2</h4>
    <b>CURRENCY:</b>
    <a href="#" id="" currency="usd" class="usd-btn currency-btn active">US$</a>
    <span>|</span> <a href="#" currency="gbp" id="" class="gbp-btn currency-btn">GBP£</a>
    <span>|</span> <a href="#" currency="eur" id="" class="eur-btn currency-btn">EUR€&lt;/a>
    <span style="display:none">|</span> <a style="display:none" href="#" currency="aud" id=""
        class="aud-btn currency-btn">AUS$</a>
    <span style="display:none">|</span> <a style="display:none" href="#" currency="cad" id=""
        class="cad-btn currency-btn">CAN$</a>
    <span style="display:none">|</span> <a style="display:none" href="#" currency="mxn" id=""
        class="mxn-btn currency-btn">MEX$</a>
    <span style="display:none">|</span> <a style="display:none" href="#" currency="sgd" id=""
        class="sgd-btn currency-btn">SGP$</a>
    <span class='currency-more'>|</span>
    <a href="#" class="currency-more">Show more&hellip;</a>
</div>
</div>
<div class="sec3">
    <h4>Section 3</h4>
    <b>CURRENCY:</b>
    <a href="#" id="" currency="usd" class="usd-btn currency-btn active">US$</a>
    <span>|</span> <a href="#" currency="gbp" id="" class="gbp-btn currency-btn">GBP£</a>
    <span>|</span> <a href="#" currency="eur" id="" class="eur-btn currency-btn">EUR€&lt;/a>
    <span style="display:none">|</span> <a style="display:none" href="#" currency="aud" id=""
        class="aud-btn currency-btn">AUS$</a>
    <span style="display:none">|</span> <a style="display:none" href="#" currency="cad" id=""
        class="cad-btn currency-btn">CAN$</a>
    <span style="display:none">|</span> <a style="display:none" href="#" currency="mxn" id=""
        class="mxn-btn currency-btn">MEX$</a>
    <span style="display:none">|</span> <a style="display:none" href="#" currency="sgd" id=""
        class="sgd-btn currency-btn">SGP$</a>
    <span class='currency-more'>|</span>
    <a href="#" class="currency-more">Show more&hellip;</a>
</div>
</div>