Question

我有 HTML ，每隔5秒，显示类会在下一个<li>传递

<ul class="listing">
  <li class="display"><img src="first"></li>
  <li class=""><img src="second"></li>
  <li class=""><img src="third"></li>
</ul>

<div class="put"></div>

并拥有 SCRIPT

var q = jQuery(".listing").children(".display");
var w = jQuery(q).prev("li").find("img").attr("src");
var e = jQuery(q).first();
var r = jQuery(".listing > li").last().find("img").attr("src");

if(e){
  jQuery(".put").css({"background-image":"url(" + r + ")"});
}else{
  jQuery(".put").css({"background-image":"url(" + w + ")"});
}

我希望获得具有显示类的<li>的 PREVIOUS 图片src，并将其放入<div>并将其设为< EM>背景图像

但如果第一个<li>有类display，我想显示最后一张图片。

PS。对不起，我忘了把以前的

Answer 1

$('.listing li.display').each(function(this){
this.hide();
});

$('.listing li.display').first().show();

Answer 2

试试这个代码段。

var isFirst = $('.listing li').first().hasClass('display');
var src;
if(isFirst)
{
  src = $('.listing li').last().find('img').attr('src');
}
else
{
  src = $('.listing li:eq('+parseInt($('.listing li.display').index()-1)+')').find('img').attr('src')
}
console.log("THIS SRC WILL BE SET   " + src);
$(".put").css({"background-image":"url(" + src + ")"});

console.log("NOW DIV HAS NEW SRC   " + $('.put').css('background-image'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="listing">
  <li class="display"><img src="https://placehold.it/350x50"></li>
  <li class=""><img src="https://placehold.it/350x75"></li>
  <li class=""><img src="https://placehold.it/350x100"></li>
</ul>

<div class="put">DIV with Background Image</div>

Answer 3

在您的解决方案中，请注意变量w未定义，因为列表中没有前一个元素。变量e与变量q相同。你能否详细解释一下你想要达到的目标。如果它是关于隐藏/显示图像，我会推荐像Nitya Kumar建议的解决方案。

Answer 4

首先获取带有display类的元素，然后使用html()获取图像以替换当前图像，然后您可以使用setInterval()重复代码每5秒钟：

var e;
setInterval(function(){
  e = $('.listing').find('.display');
  $('.put').html(e.html());
  //change elememt class
  console.log(e.next('li').length)
  if(e.next('li').length){
   e.removeClass('display').next('li').addClass('display');
  }else{
   e.removeClass('display');
   e = $('.listing').children().first('li').addClass('display');
  }
}, 5000)

JSFiddle

Answer 5

检查小提琴：https://jsfiddle.net/bugc6w3y/ 你需要做的是检查两个元素的索引：

var q = jQuery(".listing").children(".display");
var w = jQuery(q).prev("li").find("img").attr("src");
var e = jQuery('li').first();
var r = jQuery(".listing > li").last().find("img").attr("src");

var q1 = jQuery( "li" ).index( q ); 
var e1 = jQuery( "li" ).index( e ); 

if(e1==q1) {
  jQuery(".put").css({"background-image":"url(" + r + ")"});
}else{
  jQuery(".put").css({"background-image":"url(" + w + ")"});
}

选择<li>：第一个jquery

5 个答案: