我需要在一个页面上有多个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>
2条答案
按热度按时间pgccezyw1#
你需要发挥杠杆作用
$(this)
. 这只是一个基本的用法示例:另外,看起来您正在使用
id
属性与class
属性id是唯一的,页面上不应该有相同id的副本。类可以在一个页面上多次使用。sg3maiej2#
您可以通过创建
eventHandler
来处理所有的按钮点击。更新
我已经调整了演示以使用添加到问题中的html。我不确定是否已捕获您的所有需求,但代码重复的数量已减少。
请参阅下面的演示