使用jquery在不同的div上使用相同的按钮

p5fdfcr1  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(230)

我需要在一个页面上有多个div,每个div都有3个按钮,用于隐藏和显示每个div内的内容。两个div的目标完全相同,但实际情况是,当我按下第一个div上的按钮时,它也会触发其他div上的操作。我怎样才能解决这个问题?我的想法是,例如,每个div有一个唯一的id,它允许我在页面上多次使用相同的按钮,而不必重复js代码。
这是我的初始代码,我希望能够添加一些我可以使用的按钮,但只能在它们的div中使用触发器。
希望有人能给我指出正确的方向。

$('.descontoBTN').on('click', function () {
    $(".pacote div").hide()
    $(".desconto").show()
    $('.descontoBTN').addClass('active')
    $('.mensalidadeBTN').removeClass('active')
    $('.tvBTN').removeClass('active')

});
$('.mensalidadeBTN').on('click', function () {
    $(".pacote div").hide()
    $(".mensalidade").show()
    $('.descontoBTN').removeClass('active')
    $('.mensalidadeBTN').addClass('active')
    $('.tvBTN').removeClass('active')

});
$('.tvBTN').on('click', function () {
    $(".pacote div").hide()
    $(".tv").show()
    $('.descontoBTN').removeClass('active')
    $('.mensalidadeBTN').removeClass('active')
    $('.tvBTN').addClass('active')

});
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="row">

    <div class="col-12" id="pack1">

      <div class="pacote px-4 pt-4 pb-1">
        <div class="desconto">
          <h4><strong>TITLE1</strong></h4>
          <h6><del>€99,99/mês</del></h6>
          <h3>€93,99<span>/mês</span></h3>
        </div>
        <div class="mensalidade" style="display:none;">
          <h4><strong>TITLE2</strong></h4>
          <h6>1 Mensalidade</h6>
          <h3>€95,99<span>/mês</span></h3>
        </div>

        <div class="tv" style="display:none;">
          <h4><strong>TITLE3</strong></h4>
          <h6>TV 32"</h6>
          <h3>€95,99<span>/mês</span></h3>
        </div>
      </div>

      <div class="ofertas px-4 pb-1">
        <div class="btn-group d-flex gap-2" role="group">
          <button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
          <button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
          <button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
        </div>
      </div>

    </div>

    <div class="col-12" id="pack2">

      <div class="pacote px-4 pt-4 pb-1">
        <div class="desconto">
          <h4><strong>TITLE1</strong></h4>
          <h6><del>€89,99/mês</del></h6>
          <h3>€83,99<span>/mês</span></h3>
        </div>
        <div class="mensalidade" style="display:none;">
          <h4><strong>TITLE2</strong></h4>
          <h6>2 Mensalidade</h6>
          <h3>€195,99<span>/mês</span></h3>
        </div>

        <div class="tv" style="display:none;">
          <h4><strong>TITLE3</strong></h4>
          <h6>TV 32"</h6>
          <h3>€295,99<span>/mês</span></h3>
        </div>
      </div>

      <div class="ofertas px-4 pb-1">
        <div class="btn-group d-flex gap-2" role="group">
          <button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
          <button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
          <button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
        </div>
      </div>

    </div>

    <div class="col-12" id="pack3">

      <div class="pacote px-4 pt-4 pb-1">
        <div class="desconto">
          <h4><strong>TITLE1</strong></h4>
          <h6><del>€199,99/mês</del></h6>
          <h3>€193,99<span>/mês</span></h3>
        </div>
        <div class="mensalidade" style="display:none;">
          <h4><strong>TITLE2</strong></h4>
          <h6>1 Mensalidade</h6>
          <h3>€95,99<span>/mês</span></h3>
        </div>

        <div class="tv" style="display:none;">
          <h4><strong>TITLE3</strong></h4>
          <h6>TV 32"</h6>
          <h3>€95,99<span>/mês</span></h3>
        </div>
      </div>

      <div class="ofertas px-4 pb-1">
        <div class="btn-group d-flex gap-2" role="group">
          <button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
          <button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
          <button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
        </div>
      </div>

    </div>

  </div>
</div>
pgccezyw

pgccezyw1#

你需要发挥杠杆作用 $(this) . 这只是一个基本的用法示例:

$('.myButtonClass').on('click', function(){
 $('.myButtonClass').not(this).hide()
 $(this).parent().find('.otherTargetedClass').addClass('active')
 $(this).siblings().fadeOut('slow')
 $(this).parent().show()
})

另外,看起来您正在使用 id 属性与 class 属性id是唯一的,页面上不应该有相同id的副本。类可以在一个页面上多次使用。

sg3maiej

sg3maiej2#

您可以通过创建 eventHandler 来处理所有的按钮点击。
更新
我已经调整了演示以使用添加到问题中的html。我不确定是否已捕获您的所有需求,但代码重复的数量已减少。
请参阅下面的演示

$('.ofertas button').on('click', function() {
  // find closest parent 'group'
  let columnGroupElementId = $(this).closest('div.col-12').attr('id');
  let elementIdSelector = '#' + columnGroupElementId
  // hide all .pacote divs within it
  $(elementIdSelector).find(".pacote div").hide();

  // remove class from all buttons in it
  // the line below may or may not be needed, I am not sure of your requirements
  $(this).closest(".ofertas").find('button').removeClass('active');
  $(this).addClass('active');

  // get a list of classes for selected button
  var classList = $(this).attr('class').split(/\s+/);
  var classNameToShow = '';

  // get the value of the class name that ends with BTN and use it as the class name to show
  $.each(classList, function(index, item) {
    var indexOfBtn = item.indexOf('BTN');
    if (indexOfBtn >= 0) {
      classNameToShow = item.substring(0, indexOfBtn);
      //console.log('-'+classNameToShow+'-');
    }
  });

  // show only the child of the selected one
  $(elementIdSelector).find("div." + classNameToShow).show();
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12" id="pack1">
      <div class="pacote px-4 pt-4 pb-1">
        <div class="desconto">
          <h4><strong>TITLE1</strong></h4>
          <h6><del>€99,99/mês</del></h6>
          <h3>€93,99<span>/mês</span></h3>
        </div>

        <div class="mensalidade" style="display:none;">
          <h4><strong>TITLE2</strong></h4>
          <h6>1 Mensalidade</h6>
          <h3>€95,99<span>/mês</span></h3>
        </div>

        <div class="tv" style="display:none;">
          <h4><strong>TITLE3</strong></h4>
          <h6>TV 32"</h6>
          <h3>€95,99<span>/mês</span></h3>
        </div>
      </div>

      <div class="ofertas px-4 pb-1">
        <div class="btn-group d-flex gap-2" role="group">
          <button type="button" class="btn btn-dark w-100 active descontoBTN" data-value="desconto">
            Desconto €3/mês
          </button>
          <button type="button" class="btn btn-dark w-100 mensalidadeBTN" data-value="mensalidade">
            1 Mensalidade
          </button>
          <button type="button" class="btn btn-dark w-100 tvBTN" data-value="tv">
            TV 32"
          </button>
        </div>
      </div>

    </div>

    <div class="col-12" id="pack2">
      <div class="pacote px-4 pt-4 pb-1">
        <div class="desconto">
          <h4><strong>TITLE1</strong></h4>
          <h6><del>€89,99/mês</del></h6>
          <h3>€83,99<span>/mês</span></h3>
        </div>
        <div class="mensalidade" style="display:none;">
          <h4><strong>TITLE2</strong></h4>
          <h6>2 Mensalidade</h6>
          <h3>€195,99<span>/mês</span></h3>
        </div>

        <div class="tv" style="display:none;">
          <h4><strong>TITLE3</strong></h4>
          <h6>TV 32"</h6>
          <h3>€295,99<span>/mês</span></h3>
        </div>
      </div>

      <div class="ofertas px-4 pb-1">
        <div class="btn-group d-flex gap-2" role="group">
          <button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
          <button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
          <button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
        </div>
      </div>

    </div>

    <div class="col-12" id="pack3">

      <div class="pacote px-4 pt-4 pb-1">
        <div class="desconto">
          <h4><strong>TITLE1</strong></h4>
          <h6><del>€199,99/mês</del></h6>
          <h3>€193,99<span>/mês</span></h3>
        </div>
        <div class="mensalidade" style="display:none;">
          <h4><strong>TITLE2</strong></h4>
          <h6>1 Mensalidade</h6>
          <h3>€95,99<span>/mês</span></h3>
        </div>

        <div class="tv" style="display:none;">
          <h4><strong>TITLE3</strong></h4>
          <h6>TV 32"</h6>
          <h3>€95,99<span>/mês</span></h3>
        </div>
      </div>

      <div class="ofertas px-4 pb-1">
        <div class="btn-group d-flex gap-2" role="group">
          <button type="button" class="btn btn-dark w-100 active descontoBTN">Desconto €3/mês</button>
          <button type="button" class="btn btn-dark w-100 mensalidadeBTN">1 Mensalidade</button>
          <button type="button" class="btn btn-dark w-100 tvBTN">TV 32"</button>
        </div>
      </div>

    </div>

  </div>
</div>

相关问题