jQuery .Data不起作用

Question

因此，从本质上讲，我已经设置了一个页面，该页面将允许用户单击锚点，当他们这样做时，jQuery函数应使用jQuery在定义的DIV中显示新内容。html。也应该动态地从自定义数据属性中提取内容，但是它不起作用。我究竟做错了什么？这是html。

<section id="about">
<div class="content-container"> 
<h2 class="title"><span>About</span> the Film</h2><!-- / .title -->
<nav id="crew-nav">
<ul id="crew-list">
  <li class="jesse" data-first="Jesse" data-last="Winton" data-bio="JESSE WINTON is ultra mega cool beans." data-image="http://development.targetedthemovie.com/img/crew/jesse-winton-background.jpg">
    <a href="#">Jesse Winton<br>
      <span>Director/Writer</span>
    </a>
  </li>
  <li class="matt" data-first="Matt" data-last="Blick" data-bio="MATT BLICK is an awesome person when you pretend he doesn't exist." data-image="http://development.targetedthemovie.com/img/crew/matt-blick-background.jpg">
    <a href="#">Matt Blick<br>
      <span>Director of Photography</span>
    </a>
  </li>
</ul><!-- / #crew-list -->
</nav><!-- / #crew-nav -->
<div class="top-mask"></div><!-- / .top-mask -->
<article id="about-content" class="content">
<article> 
<h4 class="first-name"></h4><!-- / .first-name -->
<h3 class="last-name"></h3><!-- / .last-name -->
Wintons Motion Pictures brings you a new, hard-hitting documentary film by Jesse Winton. TARGETED will be examining one of the key issues of the day, gun control, and will take you on a fast-paced journey, following 19 year-old director Jesse Winton as he travels across the world, and goes back to the historical roots of the gun-control agenda, exposing it, and bringing out the dark truth behind gun control. TARGETED will creatively answer the increasingly tough questions regarding the issue, as well as giving us a plan that will help to mobilize freedom-loving Americans to defend the rights and liberties that have been granted to us. Coming 2014.
</article>   
</article><!-- / #about-content -->
<div class="bottom-mask"></div><!-- / .bottom-mask -->
</div><!-- / .content-container -->
</section><!-- / #about -->

这是jQuery

只是对此进行了编辑以澄清。数据生物应通过变量加载

var bio = $(this).data('bio');
$('.jesse').live('click', function() {
$('#about').css('background-image','url('+$img+')');
$('#about-content article').html(bio);
});
$('.matt').live('click', function() {
  $('#about').css('background-image','url('+$img+')');
  $('#about-content article').html(bio);
});

因此，正如您在HTML中看到的那样，我在自定义数据属性中存储了生物内容，在jQuery中，当您单击列表项目时，应将新内容加载到#ABOUT DIV中，但是它不会做。有人看到问题吗？预先感谢。

Answer 1

请注意，.live已弃用，我认为无论如何您都不需要在这里使用事件委托。

如果您要this参考单击列表元素，即.jesse或.matt，则已将这些作业放置在 INS the Event Handlers中：

$('.jesse').click('click', function() {
   var bio = $(this).data('bio');
   $('#about').css('background-image','url('+$img+')');
   $('#about-content article').html(bio);
});
$('.matt').click('click', function() {
  var bio = $(this).data('bio');
  $('#about').css('background-image','url('+$img+')');
  $('#about-content article').html(bio);
});

当然，这可以统一到

$('#crew-list > li').on('click', function() {
    var bio = $(this).data('bio');
    $('#about').css('background-image','url('+$img+')');
    $('#about-content article').html(bio);
});

我不知道$img来自哪里，但我只是假设它是一个包含URL的字符串。

我建议阅读有关活动处理的jQuery教程。