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

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

$(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'));  
  });    
});

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

1 个答案: