如何使用具有不同 AngularJS id 的 jQuery

debugcn 发表于 Dev

山姆

我在 index.html 中有这样的东西，其中每个框有 2 张图像，我试图在每个框的图像之间淡入淡出（具有不同的 id /item.id/ ）。请注意，我使用 ng-repeat，这就是我使用 angular id 的原因

<div class= "fading" id= "{{item.id}}">
  <div class="image-transition" >
    <div id= "img1" style="background:url('{{item.images[item.image]}}'); background-size: cover; background-position: center;"></div>
    <div id= "img2" style="background:url('{{item.images[item.image]}}'); background-size: cover; background-position: center;"></div>
  </div>
</div>

我在 index.js 中有这个

$(document).ready(function()
{
    $("#img1").fadeOut("slow");
    $("#img2").fadeIn("slow");
});

问题是上面的 jQuery 只适用于第一个框，我想让它适用于 AngularJS 中的每个 item.id。怎么做？

如果有不清楚的地方，请在否决我的问题之前将其注释掉。我是新来的，我将不胜感激任何反馈。

谢谢你的时间

阿玛尼·本·阿佐兹

首先，您必须修复您的 HTML：您不能在循环中使用相同的 ID，在您的案例repeat循环中，ID 是唯一的，每个 ID 必须在文档中使用一次。

假设你item.id是独一无二的，你可以这样做：

<div class= "fading" id= "{{item.id}}">
  <div class="image-transition" >
    <div id= "img1_{{item.id}}" style="background:url('{{item.images[item.image]}}'); background-size: cover; background-position: center;"></div>
    <div id= "img2_{{item.id}}" style="background:url('{{item.images[item.image]}}'); background-size: cover; background-position: center;"></div>
  </div>
</div>

然后你可以像这样使用Jquery：

$(document).ready(function(){
    //select image under image-transition div and id starting by img1_
    $('.image-transition').find($('[id^=img1_]')).fadeOut("slow");
    $('.image-transition').find($('[id^=img2_]')).fadeIn("slow");
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。