AlpineJs，将动态ID添加到元素并在鼠标悬停事件上进行比较

Question

我想在用户将鼠标悬停在图像上时显示一些属于图像的数据，我将如何添加和比较来自 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

class Dashboard extends Component
{

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

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

此代码段在仅显示一张图片时有效，但一旦添加另一张图片，工具提示就会停止工作，

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

Answer 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

AlpineJs，将动态ID添加到元素并在鼠标悬停事件上进行比较

AlpineJs, adding dynamic id to element and comparing on mouseover event

javascript

laravel

alpine.js