如何通过事件监听js执行onclick方法

Question

我有一个函数toggleVariantList，它负责显示下拉列表。是否可以在不使用 onClick 的情况下通过事件侦听器触发toggleVariantList 方法？

下拉代码 PHP Laravel:

<div class="variant-checker__button" onclick="toggleVariantList(this)">
    <div class="default-item-wrap">
      <span class="default-item">
         {{ $Product->variants->where('stock_status', 1)->first()->attribute_values[0]->varchar ?? $Product->attribute('volume')->first()->valuesToHuman() }}
      </span>
      <svg class="ic icon-arrow-down">
           <use xlink:href="#icon-arrow-down"></use>
       </svg>
       </div>
  </div>

  <div class="variant-checker-buttons-list">
  @foreach($Product->variants as $variant)
     @if($variant->image && $variant->stock_status === 1)
      <button class="list-item button-item" onclick="changeVariant(this)" data-value="{{ $variant->id }}" product-name="{{ $variant->title }}" data-price="{{ $variant->price }}" data-image="http://onelove.ua/storage/{{ $variant->image->path }}">
        {{ $variant->attribute_values[0]->varchar }}
      </button>
    @endif
    @endforeach
</div>
@push('script')
<script>
        
    function toggleVariantList(button) {
        var $container = $(button).closest('.variant-checker');
        $container.find('.variant-checker-buttons-list').toggleClass('active');
    }
</script>
@endpush

Answer 1

因此，基本上要使用事件侦听器而不是使用

toggleVariantList

来触发

onclick

函数，您可以删除内联

onclick

属性并在 JavaScript 中向按钮元素添加事件侦听器。

1。 HTML Laravel 代码

<div class="variant-checker__button">
    <div class="default-item-wrap">
        <span class="default-item">
            {{ $Product->variants->where('stock_status', 1)->first()->attribute_values[0]->varchar ?? $Product->attribute('volume')->first()->valuesToHuman() }}
        </span>
        <svg class="ic icon-arrow-down">
            <use xlink:href="#icon-arrow-down"></use>
        </svg>
    </div>
</div>

<div class="variant-checker-buttons-list">
    @foreach($Product->variants as $variant)
        @if($variant->image && $variant->stock_status === 1)
            <button class="list-item button-item" data-value="{{ $variant->id }}" product-name="{{ $variant->title }}" data-price="{{ $variant->price }}" data-image="http://onelove.ua/storage/{{ $variant->image->path }}">
                {{ $variant->attribute_values[0]->varchar }}
            </button>
        @endif
    @endforeach
</div>

2。 JavaScript 代码

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var button = document.querySelector('.variant-checker__button');
        button.addEventListener('click', function() {
            toggleVariantList(this);
        });
    });

    function toggleVariantList(button) {
        var container = button.closest('.variant-checker');
        container.querySelector('.variant-checker-buttons-list').classList.toggle('active');
    }
</script>