jQuery - 悬停时从元素获取属性

Question

尝试将 .hover 应用于显示基于动态 ID 的 div 的类。例如:

HTML

<div id="parent_one">
    <div class="touch" id="one">Touch me!</div>
    <div id="t_one"></div>
</div>
<div id="parent_two">
    <div class="touch" id="two">Touch me!</div>
    <div id="t_two"></div>
</div>

jQuery

$('.touch').hover(
    function(){
        var id = $(this).attr('id');
        var value = '#t_' + id;
        $(value).fadeIn(800);
    },
    function(){
        var id = $(this).attr('id');
        var value = '#t_' + id;
        $(value).delay(1500).fadeOut(800);
    }
);

我感觉我的错误在于使用 $(this) 但无法确定。

Answer 1

这个:

var value = 't_' + id;

需要包含#:

var value = '#t_' + id;

否则，您只是选择带有标签 t_one 的元素，该标签不是现有的标签名称。

但是使用 ids 来实现这一点是相当难看的。如果你有像这样一致的 HTML，为什么不使用这样的类结构:

<div>
  <div class="touch-handle">Touch me!</div>
  <div class="content"></div>
</div>

像这样的 JS:

$('.touch-handle').hover(
  function(){
    $(this).next('.content').fadeIn(800);
  },
  function(){
    $(this).next('.content').delay(1500).fadeOut(800);
  }
);