jquery - 如何使用 jQuery 将图像、标题和描述加载到 HTML 中的 DIVS

Question

我正在编写的功能是在最终用户单击缩略图时向下滑动面板。这个想法是面板将显示图像、标题和描述的更大版本。

这是我的 jQuery：

$(document).ready(function() {
var $feature = $('#feature')
.wrap('<div id="feature-outer"></div>');
$('.thumb').click(function() {
$feature.blindToggle('slow');
$feature.style.zIndex="-1"; 
$('#featuretitle').source=this.title;
$('#featureinfo').source=this.info;
$('#featureimage').source=this.image;  


});    
});

这是我的拇指 HTML：

<div class=thumb title="title here" info="description here" image="sunset.jpg"></div>

这里是要加载信息的地方：

<div class=feature id="feature">
     <div class=featureimage id="featureimage"></div>
     <div class=featureinfo>
          <div class=featureinfotitle id="featuretitle">Title</div>
          <p id="featureinfo">info</p>
     </div>

当我单击拇指时，面板向下滑动，但框中的信息保持默认。

Answer 1

我想你想做更多这样的事情。source注意：在 Jquery 对象上没有 的属性。

$(function() {
  var $feature = $('#feature').wrap('<div id="feature-outer"></div>');
  $('.thumb').click(function() {
    $feature.blindToggle('slow');
    $feature.style.zIndex="-1"; 
    $('#featuretitle').html($(this).attr('title'));
    $('#featureinfo').html($(this).attr('info'));
    $('#featureimage').attr('src', $(this).attr('image'));  
  });    
});