问题描述
我有一个页面,使用 Laravel 的 @if @else 操作符(@if ($step == 1) html_code @else html_code)分为 3 个步骤。每个步骤都使用 Livewire 独立显示。此步骤之一使用使用 JQuery 制作的自制选项卡。一步之刃长这样:
<div class="tabs-b">
<div class="tabs-b__btns">
<div class="tabs-b__btn tabs-b__btn_active js--tab-btn" wire:click="deliveryConditionClick">
Фиксированная закупочная стоимость
</div>
<div class="tabs-b__btn js--tab-btn" wire:click="deliveryConditionClick">
Рассчитывать от объема закупки
</div>
</div>
<div class="tabs-b__tabs-wrapper">
<div class="tabs-b__tab">
<div class="input-b">
<input type="text" class="input input-b__input js--hint-input js--num-mask" placeholder="Кол-во грамм за цену">
<label class="input-b__label">Минимальная сумма заказа у поставщика на все товары</label>
</div>
<!-- input-b -->
<div class="input-b">
<input type="text" class="input input-b__input js--hint-input js--num-mask" placeholder="Закупочная стоимость 1шт товара">
<label class="input-b__label">Закупочная стоимость 1шт товара</label>
</div>
<!-- input-b -->
<div class="input-b">
<div class="input-b__text">Позже при создании закупки на основании этих полей будет автоматически рассчитана цена для покупателя с учетом накрутки 16%. Из которых 4% – комиссия Баобум,12% – вознаграждение организатора закупки.</div>
</div>
<!-- input-b -->
</div>
<div class="tabs-b__tab" style="display: none">
<div>
<div class="form-bordered-block">
<div class="input-b input-b_duble">
<div class="input-b__inner-wp input-b__inner-wp_long">
<input type="text" class="input input-b__input js--hint-input" placeholder="Объем закупки (руб.)" value="10 000">
<label class="input-b__label">Объем закупки (руб.)</label>
</div>
<div class="input-b__inner-wp">
<input type="text" class="input input-b__input js--hint-input" placeholder="Шт. в закупке" value="10">
<label class="input-b__label">Шт. в закупке</label>
</div>
</div>
<div class="input-b-desc input-b-desc_black">Итого: 575 руб. за шт при сборе заказов на 11 500 руб.</div>
</div>
<!-- form-bordered-block -->
<div class="form-bordered-block">
<div class="input-b input-b_duble">
<div class="input-b__inner-wp input-b__inner-wp_long">
<input type="text" class="input input-b__input js--hint-input" placeholder="Объем закупки (руб.)">
<label class="input-b__label">Объем закупки (руб.)</label>
</div>
<div class="input-b__inner-wp">
<input type="text" class="input input-b__input js--hint-input" placeholder="Шт. в закупке">
<label class="input-b__label">Шт. в закупке</label>
</div>
</div>
<!-- input-b -->
<div class="input-b-desc">При заполнении полей будет рассчитана ваша цена</div>
</div>
<!-- form-bordered-block -->
</div>
<div class="add-btn">
<div class="add-btn__ico">
<svg class="icon__pluse" width="10px" height="10px">
<use xlink:href="#pluse"></use>
</svg>
</div>
<span>Добавить условие поставки</span>
</div>
</div>
</div>
</div>
JQuery 部分如下所示:
$('.js--tab-btn').click(function (){
var $btn = $(this),$block = $btn.closest('.tabs-b'),index = $btn.index();
if($btn.hasClass('tabs-b__btn_active')) return;
$block.find('.tabs-b__btn').removeClass('tabs-b__btn_active');
$btn.addClass('tabs-b__btn_active');
$block.find('.tabs-b__tab').hide().eq(index).fadeIn();
});
如果我把 HTML 部分放在第一步 - 它工作正常。但是如果我把它放在接下来的步骤中 - JQuery 不起作用并且选项卡变得不活动。如果我使用 Livewire 发出自定义事件 - 它也不起作用。至少在第二步。我应该怎么办?如何让脚本在一个刀片文件的步骤上工作?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)