AlpineJs，向元素添加动态ID并比较鼠标悬停事件答案

【问题标题】：AlpineJs, adding dynamic id to element and comparing on mouseover eventAlpineJs，向元素添加动态ID并比较鼠标悬停事件
【发布时间】：2021-02-21 05:28:14
【问题描述】：

当用户将鼠标悬停在图像上时，我想显示一些属于图像的数据，我将如何添加和比较来自 livewire 组件的 id？

Livewire 视图

<div x-data="{tooltip : false}" class="grid grid-cols-3 gap-4 ml-2 antialiased text-gray-900">
    <div @mouseover.away="{tooltip = false}">
        @forelse($animals as $animal)
            <img id="{{$animal->animals->id}}" x-on:mouseover="{tooltip = !tooltip}"
                 src="https://source.unsplash.com/random/350x350"
                 alt="Animal image"
                 class="object-cover rounded-lg shadow-md ">

            <div x-show.transition="tooltip" class="absolute -mt-16 ">
                <div class="p-6 bg-white rounded-lg shadow-lg">
                    <h4 class="mt-1 text-xl font-semibold leading-tight uppercase truncate">This is
                        : {{$animal->animals->name}}</h4>
                    <div class="mt-4">
                        <span class="font-semibold text-teal-600 text-md">4/5 ratings </span>
                        <span class="text-sm text-gray-600">(based on 234 ratings)</span>
                    </div>
                </div>
            </div>
        @empty
            <p class="text-center">No animals found</p>
        @endforelse
    </div>
</div>

Livewire 类

class Dashboard extends Component
{

    public function render()
    {
        $animal = UserAnimal::with('animals')->where('user_id', '=', Auth::id())->get();

        return view('livewire.dashboard')->with('animals', $animal);
    }
}

当只显示一张图片时，此 sn-p 有效，但一旦添加另一张图片，工具提示就会停止工作，

例如，用户将鼠标悬停在第一张图片上，该动物的名称会显示在悬停工具提示中。

【问题讨论】：

标签： javascript laravel alpine.js

【解决方案1】：

我不会在父 div 上使用全局 tooltip 属性，而是为每个动物使用 tooltip 属性 - 这意味着您可能需要调整循环和 html 结构。

<div class="grid grid-cols-3 gap-4 ml-2 antialiased text-gray-900">
    <div x-data="{tooltip : false}">
      <img id="{{$animal->animals->id}}" x-on:mouseover="{tooltip = !tooltip}" x-on:mouseout="{tooltip = !tooltip}" src="https://source.unsplash.com/random/350x350" alt="Animal image" class="object-cover rounded-lg shadow-md ">
      <div x-show.transition="tooltip" class="absolute -mt-16 ">
        <div class="p-6 bg-white rounded-lg shadow-lg">
          <h4 class="mt-1 text-xl font-semibold leading-tight uppercase truncate">This is
            : A dog</h4>
          <div class="mt-4">
            <span class="font-semibold text-teal-600 text-md">4/5 ratings </span>
            <span class="text-sm text-gray-600">(based on 234 ratings)</span>
          </div>
        </div>
      </div>
    </div>

    <div x-data="{tooltip : false}">
      <img id="{{$animal->animals->id}}" x-on:mouseover="{tooltip = !tooltip}" x-on:mouseout="{tooltip = !tooltip}" src="https://source.unsplash.com/random/350x350" alt="Animal image" class="object-cover rounded-lg shadow-md ">
      <div x-show.transition="tooltip" class="absolute -mt-16 ">
        <div class="p-6 bg-white rounded-lg shadow-lg">
          <h4 class="mt-1 text-xl font-semibold leading-tight uppercase truncate">This is
            : A cat</h4>
          <div class="mt-4">
            <span class="font-semibold text-teal-600 text-md">1/5 ratings </span>
            <span class="text-sm text-gray-600">(based on 2 ratings)</span>
          </div>
        </div>
      </div>
    </div>
  </div>

Example in Codepen

【讨论】：

根据您的回答修复了我的循环和 html，并修复了它。谢谢！花了这么长时间，但似乎比我想象的要容易得多。