如何使用 Jquery 循环变量

Question

我是 Javascript 和 Jquery 新手，遇到了一个小问题。

我正在尝试确保如果给定链接存在，将鼠标悬停在此链接上会弹出一个带有 fadeToggle() 的弹出窗口。

所以我写了这段代码：

  if ($('.link-1')) {
    $('.link-1').mouseover(function () {
      $('.popup-1').fadeToggle();
    })
      .mouseout(function () {
        $('.popup-1').fadeToggle();
      })
  }

但是，我不想重复十次，而是想写一个循环，如下所示：

  var number = 0;
  while (number < 10) {
    var popup = '.popup-' + number;
    var link = '.link-' + number;
    if ($(link)) {
      $(link).mouseover(function () {
        $(popup).fadeToggle();
      })
        .mouseout(function () {
          $(popup).fadeToggle();
        })
    }
    number++;
  }

但它不起作用。你能帮我吗？

提前谢谢你！

Answer 1

欢迎来到网络社区 :-)

我的 jQuery 技能有点生疏，但我记得有一个 Attribute Contains Selector，你可以像这样将它与 .each() 结合使用：

$('[class*="link-"]').each(function (index, link) {
  $('[class="popup-"' + index + '"]').each(function (_, popup) {
    $(link)
      .mouseover(function () {
        $(popup).fadeToggle();
      })
      .mouseout(function () {
        $(popup).fadeToggle();
      })
  }
}

第二个索引并不有趣，这就是我将参数命名为“_”的原因。 让我知道它是否仍然有效

Answer 2

根据您的 cmets，我推荐这种方法。

为每个与您要触发的弹出窗口对应的链接添加一个数据属性。这看起来像这样：

<a href='#' class='link-1' data-popup='popup-1'> Link </a>

然后将悬停事件添加到所有链接，如果它具有数据类型，则执行操作：

//hover event on all links(assumes anchor tags)   
    $('a').mouseover(function () {
      if ($(this).attr('data-popup')) {
     let popup = '.' + $(this).attr('data-popup');
        $(`${popup}`).fadeToggle();
    }})
      .mouseout(function () {
        if ($(this).attr('data-popup')) {
        let popup = '.' + $(this).attr('data-popup');
        $(`${popup}`).fadeToggle();
      }})

如果适合您的用例，您也可以使用 .hover 而不是 .mouseover 和 .mouseout 将其设为单行函数

**此处添加重构过程：

//start with the original function

$('a').hover(function () {
  if ($(this).attr('data-popup')) {
  let popup = '.' + $(this).attr('data-popup');
    $(`${popup}`).fadeToggle();
}})

//consolidate the enter and exit events using .hover()

$('a').hover(function () {
  if ($(this).attr('data-popup')) {
  let popup = '.' + $(this).attr('data-popup');
    $(`${popup}`).fadeToggle();
}})

//remove the if statement, because the function firing without a pop up won't result in any effect

$('a').hover(function () {
  let popup = '.' + $(this).attr('data-popup');
    $(`${popup}`).fadeToggle();
})

//substitute the variable directly into the jquery tag

$('a').hover(function () {
    $(`'.${$(this).attr('data-popup')}`).fadeToggle();
})

// use an ES6 arrow function to make this a one line function

$('a').hover(() =>  $(`.${$(this).attr('data-popup')}`).fadeToggle())

//as is, this function won't work, because the arrow function binds the "this" keyword differently. 
//Event handlers have an optional parameter that is an event JSON object, so we pass that into the function.
//Because it is a parameter, and is used as a variable we can call event "e" for short
//target is a property of the JSON object 'event' that indicates what specific element is triggering the event
// You can console log "e" to see what other values are baked into the event 


$('a').hover((e) => $(`.${$(e.target).attr('data-popup')}`).fadeToggle())

//lastly, because we are using an anonymous arrow function with only one parameter, we can omit the parenthesis around the paremeter

$('a').hover(e => $(`.${$(e.target).attr('data-popup')}`).fadeToggle())

最终的结果是下面的一条线！

$('a').hover(e => $(`.${$(e.target).attr('data-popup')}`).fadeToggle())

可以在此处找到有关数据属性的其他信息：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Answer 3

如果你的对象是从link-1到link-10的顺序，你可以试试这个方法

1. 使用每个函数的具有类“link-[number]”的循环对象
2. 使用索引+1保存号码
3. 对悬停的对象执行操作

所以代码会是这样的：

$('[class*="link-"]').each(function (index) {
    var number = index + 1; //index start from 0, so it need to add + 1
    $(this)
        .mouseover(function () {
            $('[class="popup-' + number+ '"]').fadeToggle();
        })
        .mouseout(function () {
            $('[class="popup-' + number+ '"]').fadeToggle();
        })
});

但是如果您的对象不是从链接 1 到链接 10 的顺序，我建议在您的 HTML 代码中使用自定义数据属性。 示例：

<a class="link-1" data-number="1">test 1</a>
<div class="popup-1" style="display:none">
test 1 popup
</div>

然后将数字变量更改为以下代码：

var number = $(this).attr("data-number");

这样会更省钱。 希望对您有所帮助。