var numImages = $（'。editorials1_on'）。index（）;不管用。有人请解决我的问题

时间：2016-03-01 14:20:46

标签： javascript jquery

我需要在Span（#current_item）标签中显示包含类“editorials1_on”的图像的当前位置，但它显示-1或0或不更改。所以我添加了var position = numImages+1;并在范围中添加了position类。我不知道我在哪里做错了。请建议我。感谢。

$(document).ready(function() {
	var target = $('#custom_sliderEditorials').children('li');
	target.attr('class','custom-rslides-li');
	var total = target.length;
	$('#total_item').html(total);
	var numImages = $('.editorials1_on').index();
	var position = numImages+1;
	$('#current_item').html(position);
	target.first().addClass('editorials1_on');
	$('#next_btn').click(function(){
		if(target.last().hasClass('editorials1_on')){
			var recent_id = $('.editorials1_on').attr('id');
			target.last().removeClass('editorials1_on');
			target.first().addClass('editorials1_on');
		} else {
			var recent_id = $('.editorials1_on').attr('id');
			$('#'+recent_id).removeClass('editorials1_on');
			$('#'+recent_id).next('li').addClass('editorials1_on');
		}
	});
	$('#prev_btn').click(function(){
		if(target.first().hasClass('editorials1_on')){
			var recent_id = $('.editorials1_on').attr('id');
			target.first().removeClass('editorials1_on');
			target.last().addClass('editorials1_on');
		} else {
			var recent_id = $('.editorials1_on').attr('id');
			$('#'+recent_id).removeClass('editorials1_on');
			$('#'+recent_id).prev('li').addClass('editorials1_on');
		}
	});
});
ul{list-style: none;}
.my-custom-class{
  width: 100px;
  height: 100px;
}
.prev-btn {
    width: 50px;
    height: 50px;
    display: block;
    float: left;
    background: #fff;
    border: 1px solid;
    position: relative;
    margin-right: 0px;
}
.next-btn {
    width: 50px;
    height: 50px;
    display: block;
    float: left;
    background: #fff;
    border: 1px solid;
    position: relative;
    margin-right: 5px !important;
}
.prev-btn:before {
    content: "";
    border-top: 1px solid;
    border-right: 1px solid;
    position: absolute;
    width: 25px;
    height: 25px;
    transform: rotate(45deg);
    top: 0;
    bottom: 0;
    left: -10px;
    right: 0;
    margin: auto;
}
.next-btn:before {
    content: "";
    border-top: 1px solid;
    border-right: 1px solid;
    position: absolute;
    width: 25px;
    height: 25px;
    transform: rotate(-135deg);
    top: 0;
    bottom: 0;
    left: 0;
    right: -10px;
    margin: auto;
}
.custom-rslides-li {
    display: block;
    float: none;
    position: absolute;
    opacity: 0;
    z-index: 1;
    transition: opacity 500ms ease-in-out;
}
.editorials1_on {
    float: left;
    position: relative;
    opacity: 1;
    z-index: 2;
    display: list-item;
    transition: opacity 500ms ease-in-out;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="custom-rslides" id="custom_sliderEditorials">
<li id="cs0"><img src="" class="my-custom-class" alt="" style="background: red" /></li>
<li id="cs1"><img src="" class="my-custom-class" alt="" style="background: blue" /></li>
<li id="cs2"><img src="" class="my-custom-class" alt="" style="background: orange" /></li>
<li id="cs3"><img src="" class="my-custom-class" alt="" style="background: green" /></li>
<li id="cs4"><img src="" class="my-custom-class" alt="" style="background: yellow" /></li>
<li id="cs5"><img src="" class="my-custom-class" alt="" style="background: pink" /></li>
<li id="cs6"><img src="" class="my-custom-class" alt="" style="background: gray" /></li>
</ul>
<div class="clearfix"></div>
<div class="lt-rt-controls">
<span id="current_item">-1</span>
<span id="total_item">7</span>
<div class="clearfix"></div>
                                <a href="javascript: void(0)" class="editorials_nav editorials1_nav next next-btn" id="prev_btn"></a>
                                <a href="javascript: void(0)" class="editorials_nav editorials1_nav prev prev-btn" id="next_btn"></a>
                            </div>

2 个答案:

答案 0 :(得分：2)

您的代码有效但只是放

target.first().addClass('editorials1_on');

前

var numImages = $('.editorials1_on').index();  
var position = numImages+1;
$('#current_item').html(position);

并放

$('#current_item').html($('.editorials1_on').index()+1);

在每个导航按钮中。

整个代码：

$(document).ready(function() {
    var target = $('#custom_sliderEditorials').children('li');
    target.attr('class','custom-rslides-li');
    var total = target.length;
    $('#total_item').html(total);

    target.first().addClass('editorials1_on');
    var numImages = $('.editorials1_on').index();  
    var position = numImages+1;
    $('#current_item').html(position);


$('#next_btn').click(function(){
    if(target.last().hasClass('editorials1_on')){
        var recent_id = $('.editorials1_on').attr('id');
        target.last().removeClass('editorials1_on');
        target.first().addClass('editorials1_on')

  $('#current_item').html($('.editorials1_on').index()+1);

    } else {
        var recent_id = $('.editorials1_on').attr('id');
        $('#'+recent_id).removeClass('editorials1_on');
        $('#'+recent_id).next('li').addClass('editorials1_on');

  $('#current_item').html($('.editorials1_on').index()+1);
    }
});

$('#prev_btn').click(function(){
    if(target.first().hasClass('editorials1_on')){
        var recent_id = $('.editorials1_on').attr('id');
        target.first().removeClass('editorials1_on');
        target.last().addClass('editorials1_on');
  $('#current_item').html($('.editorials1_on').index()+1);
    } else {
        var recent_id = $('.editorials1_on').attr('id');
        $('#'+recent_id).removeClass('editorials1_on');
        $('#'+recent_id).prev('li').addClass('editorials1_on');
  $('#current_item').html($('.editorials1_on').index()+1);
    }
});
});

答案 1 :(得分：1)

您的代码比它需要的复杂得多。您可以使用next()和prev()来简化它，而不是跟踪当前元素的索引，并使用它来查找要显示的下一个元素。试试这个：

$(document).ready(function() {
  var $li = $('#custom_sliderEditorials li').addClass('custom-rslides-li');
  $('#total_item').text($li.length);

  $('#next_btn, #prev_btn').click(function(e) {
    e.preventDefault();
    var directionNext = $(this).is('#next_btn');
    var $current = $li.filter('.editorials1_on');
    var $target = $current[directionNext ? 'next' : 'prev']();
    if (!$target.length)
      $target = $li[directionNext ? 'first' : 'last']();
    $target.addClass('editorials1_on').siblings().removeClass('editorials1_on');
    $('#current_item').text($target.index());
  });
});
ul {
  list-style: none;
}
.my-custom-class {
  width: 100px;
  height: 100px;
}
.prev-btn {
  width: 50px;
  height: 50px;
  display: block;
  float: left;
  background: #fff;
  border: 1px solid;
  position: relative;
  margin-right: 0px;
}
.next-btn {
  width: 50px;
  height: 50px;
  display: block;
  float: left;
  background: #fff;
  border: 1px solid;
  position: relative;
  margin-right: 5px !important;
}
.prev-btn:before {
  content: "";
  border-top: 1px solid;
  border-right: 1px solid;
  position: absolute;
  width: 25px;
  height: 25px;
  transform: rotate(45deg);
  top: 0;
  bottom: 0;
  left: -10px;
  right: 0;
  margin: auto;
}
.next-btn:before {
  content: "";
  border-top: 1px solid;
  border-right: 1px solid;
  position: absolute;
  width: 25px;
  height: 25px;
  transform: rotate(-135deg);
  top: 0;
  bottom: 0;
  left: 0;
  right: -10px;
  margin: auto;
}
.custom-rslides-li {
  display: block;
  float: none;
  position: absolute;
  opacity: 0;
  z-index: 1;
  transition: opacity 500ms ease-in-out;
}
.editorials1_on {
  float: left;
  position: relative;
  opacity: 1;
  z-index: 2;
  display: list-item;
  transition: opacity 500ms ease-in-out;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="custom-rslides" id="custom_sliderEditorials">
  <li id="cs0" class="editorials1_on">
    <img src="" class="my-custom-class" alt="" style="background: red" />
  </li>
  <li id="cs1">
    <img src="" class="my-custom-class" alt="" style="background: blue" />
  </li>
  <li id="cs2">
    <img src="" class="my-custom-class" alt="" style="background: orange" />
  </li>
  <li id="cs3">
    <img src="" class="my-custom-class" alt="" style="background: green" />
  </li>
  <li id="cs4">
    <img src="" class="my-custom-class" alt="" style="background: yellow" />
  </li>
  <li id="cs5">
    <img src="" class="my-custom-class" alt="" style="background: pink" />
  </li>
  <li id="cs6">
    <img src="" class="my-custom-class" alt="" style="background: gray" />
  </li>
</ul>
<div class="clearfix"></div>
<div class="lt-rt-controls">
  <span id="current_item">0</span>
  <span id="total_item">7</span>
  <div class="clearfix"></div>
  <a href="#" class="editorials_nav editorials1_nav next next-btn" id="prev_btn"></a>
  <a href="#" class="editorials_nav editorials1_nav prev prev-btn" id="next_btn"></a>
</div>

相关问题
最新问题