Question

试图解决这个问题。我对jQuery缺乏经验，并且不了解如何遍历元素并匹配一个。

我有3个div：

    <div class="first-image">
      <img src="images/first.png">
    </div>
    <div class="second-image">
      <img src="images/second.png">
    </div>
    <div class="third-image">
      <img src="images/third.png">
    </div>

在旁边，一个名为＆＃39; copy＆＃39;的div中的链接使用rel = first-image等：

<a href="#" onclick="return false" rel="first-image">...</a>

单击该链接将淡化相关div中的图像（使用GSAP TweenMax）这是我一直在努力做到的功能......但我并不完全理解如何遍历所有＆＃34; rel＆＃34;元素，并与已点击的元素匹配。

<script>
//pause slideshow on members to ledger when text is clicked, and show associated image
$(function() {
 $('.copy').on('click','a',function(e) {
  e.preventDefault();
  var slideName = $(this).attr('rel');

  $("rel").each(function(i){
    if (this.rel == slideName) {
      console.log(this);
    }
  });


    //var change_screens_tween = TweenMax.to('.'+slideName+'', 1, {
    //autoAlpha:1
    //});
    });
  });
</script>

我做错了什么？我的浏览器中甚至没有出错。： - （

感谢下面的回答，我走得更远了。这是我修改后的代码。

   $('[rel]').each(function(k, v){
    if (v == slideName) {
        var change_screens_tween = TweenMax.to('.'+slideName+'', 1, {
          autoAlpha:1
        });
    } else {
        var change_screens_tween = TweenMax.to('.'+slideName+'', 1, {
          autoAlpha:0
        });
    }
  });      
});

这开始起作用，但会使屏幕截图显示然后立即淡出。它只能工作一次。有什么想法吗？

Answer 1

在rel周围添加括号，如下所示：

$('[rel]').each(function() {
    if ($(this).attr('rel') == slideName) {
      console.log(this);
    }
});

循环遍历元素并根据链接属性进行更改

1 个答案: