Question

作者和标题不会在第一次点击时显示，但会在之后的每个事件中显示。急需帮助，非常感谢。

HTML

<div class="container">
  <div class="row">
    <ul class="gallery-stacked">
      <li class="gallery-thumb"><a title="Image 1" data-caption="This is a caption" data-author="Mr. Cupcake" href="#"><img class="gth img-responsive center-block" src="//placehold.it/600x350"></a></li>
      <li class="gallery-thumb"><a title="Image 2" data-caption="This is a caption" data-author="Mr. Cupcake" href="#"><img class="gth img-responsive center-block" src="//placehold.it/600x350/2255EE"></a></li>
    </ul>
  </div>
  <div class="modal" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" type="button" data-dismiss="modal">×</button>
          <h3 class="modal-title"></h3>
        </div>
        <div class="modal-body">
          <div id="modalCarousel" class="carousel">
            <div class="carousel-inner"> </div>
            <p class="modal-caption"></p>
            <p class="modal-author"></p>
            <a class="carousel-control left" href="#modalCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

的jQuery

$('li .gth').on('load', function() {

}).each(function(i) {
  if(this.complete) {
    var item = $('<div class="item"></div>');
    var itemli = $(this).parents('li');
    var title = $(this).parent('a').attr("title");
    var caption = $(this).parent('a').attr("data-caption");
    var author = $(this).parent('a').attr("data-author");   

    item.attr("title",title);
    item.attr("data-caption",caption);
    item.attr("data-author",author);

    $(itemli.html()).appendTo(item);
    item.appendTo('.carousel-inner'); 
    if (i==0){ // set first item active
    item.addClass('active');
    }
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval:false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
  $('.modal-title').html($(this).find('.active').attr("title"));
  $('.modal-caption').html($(this).find('.active').attr("data-caption")).addClass('text-center');
  $('.modal-author').html($(this).find('.active').attr("data-author")).addClass('text-right');
})

/* when clicking a thumbnail */
$('li .gth').click(function(){
    var idx = $(this).parents('li').index();
    var id = parseInt(idx);
    $('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // slide carousel to selected

});

我确定它是我的jQuery，但我不是专家。

Answer 1

更改

  /* change modal title when slide changes */
  $('#modalCarousel').on('slid.bs.carousel', function () {
      ...
  })

要

  /* change modal title when slide changes */
  $('#modalCarousel').on('slid.bs.carousel', function () {
      ...
  });

你忘了那里的分号了。另外，我觉得你的代码的前几行完全没用。你为什么不包围一切

$(function() { 
    ...
});

希望能解决它。

Answer 2

我找到了解决方案。我的问题是检查是否i == 0.由于模态窗口可以在任何图片上启动，我无法检查该值是什么。所以，我无法评估，因为我可以成为第一个图像或第99个。

所以这里是jQuery解决方案。

$('li .gth').on('load', function() {

}).each(function(i) {
  if(this.complete) {
    var item = $('<div class="item"></div>');
    var itemli = $(this).parents('li');
    var title = $(this).parent('a').attr("title");
    var caption = $(this).parent('a').attr("data-caption");
    var author = $(this).parent('a').attr("data-author");   

    item.attr("title",title);
    item.attr("data-caption",caption);
    item.attr("data-author",author);

    $(itemli.html()).appendTo(item);
    item.appendTo('.carousel-inner'); 
    if (i){ // set i item active
    item.addClass('active');
    }
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval:false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
  $('.modal-title').html($(this).find('.active').attr("title"));
  $('.modal-caption').html($(this).find('.active').attr("data-caption")).addClass('text-center');
  $('.modal-author').html($(this).find('.active').attr("data-author")).addClass('text-right');
})

/* when clicking a thumbnail */
$('li .gth').click(function(){
    var idx = $(this).parents('li').index();
    var id = parseInt(idx);
    $('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // slide carousel to selected

});

我确信代码可以清理，但至少它现在正在运行。

jQuery不是第一次运行，而是每次都运行

2 个答案: