Javascript中的索引位置：课后继续答案

【问题标题】：Indexing position in Javascript: continue after classJavascript中的索引位置：课后继续
【发布时间】：2021-11-19 10:56:55
【问题描述】：

我需要更改一些元素的索引，有没有办法继续索引select-image，就像class="column" 不存在一样？为了清楚起见，我想要这样的东西：

<div class="pagination-slider">
<div class="column">
0 <div class="select-image"></div>
1 <div class="select-image"></div>
2 <div class="select-image"></div>
</div>
<div class="column">
3 <div class="select-image"></div>
4 <div class="select-image"></div>
5 <div class="select-image"></div>
</div>
</div>

更新：这是我创建类的代码。实际上，出于图形原因，我需要创建两列（它在网站上运行良好，我不知道为什么它在 sn-p 上不起作用），但是索引被搞砸了，所以选择不t 正常工作。如果我单击图 9，由于索引，它会停留在图 1 中。

$(document).ready(function() {

  //create elements
  $('.slider').each(function() {
    $slider = $(this);
    var $slider_block = $slider.find($('.slider-block'));
    $slider_block.append('<div class="pagination-slider"></div>') //add the div for the pagination

    var titles_pagination = $slider.find($('.slider-title'));
    titles_pagination.each(function() {
      $slider.find($('.pagination-slider')).append('<div class="select-image" alt="go to image" role="tab" tabindex="0"><span>' + $(this).text() + "</span></div>") //gets the titles and relative urls to the slider items
    });

    $slider.find($('.imageslide')).each(function(i, el) { //add a numbered id for each figure
      $(el).attr('id', 'image-num-' + i);
    });

    //if there are more than 8 figures, make 2 columns of selection buttons
    i = 0;
    lenChild = $('.select-image').length;
    if (lenChild >= 8) {
      var parentContainer = $('.pagination-slider');
      v2 = (Math.floor(lenChild / 8) * 8);
      parentElem = 0;
      jQuery(this).find('.select-image').each(function() {
        if (i < v2) {
          if (i % 8 == 0) {
            if (i != 0)
              jQuery(parentElem).appendTo(jQuery(parentContainer));
            parentElem = jQuery('<div class="column-slider"></div>');
          }
          jQuery(this).appendTo(jQuery(parentElem));
          i++;
        }
      });
      jQuery(parentElem).appendTo(jQuery(parentContainer));
    }
  });
  //select and change figure

  $('.slider').each(function() {
    $slider = $(this);

    var $slides = $slider.find($('.imageslide'));
    var $selectors = $slider.find($('.select-image'));

    $slides.first().addClass('current').show();
    $selectors.first().addClass('selected');

    $selectors.click(function() {
      var index = $(this).index(); //the index of the selector
      var $nextSlide = $slides.eq(index);
      // don't do anything if same indexed slide already has current class
      if (!$nextSlide.hasClass('current')) {
        $slides.filter('.current').removeClass('current').fadeOut(function() {
          $selectors.filter('.selected').removeClass('selected')
          $nextSlide.addClass('current').fadeIn()
          $selectors.eq(index).addClass('selected');
        });
      }
    });
  });
});

.imageslide {
  display: none;
  border: 3px solid black;
  padding: 10px;
  position: relative;
}

.slider-block {
  justify-content: center;
  display: flex;
}

.slider-title {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  background-color: black;
  color: white;
}

.pagination-slider {
  margin-top: 1em;
}

.column-slider{
  float: left;
}

.select-image {
  background-color: #fa648f;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  margin: 0.5em;
  cursor: pointer;
}

.select-image::after {
  content: "";
  position: relative;
  height: 3px;
  left: 0;
  top: 0.6em;
  /*same as padding*/
  display: block;
  width: 100%;
  background-color: #000;
  transform: scaleX(0);
  visibility: hidden;
  transition: all 0.3 ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.select-image:hover::after,
.select-image:focus::after {
  transform: scaleX(1);
  visibility: visible;
}

.select-image.selected {
  border: 3px solid black;
}

.select-image.selected:hover::after,
.select-image.selected:focus::after {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider-block">
    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 1</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMERO ITEM"><img draggable="false" src="INDIRIZZO IMMAGINE" /><span class="slider-title">Fig 2</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 3</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 4</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 5</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 6</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 7</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 8</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 9</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 10</span></a>
    </figure>

  </div>
</div>

【问题讨论】：

你现在怎么样indexing这些？
你现在怎么样了？请向我们展示您目前的方法
已更新代码
如果你知道哪个项目被点击了，为什么还需要索引
图片选择的逻辑在js sn-p的“//select and change figure”部分

标签： javascript html jquery indexing

【解决方案1】：

你可以用不同的方式做到这一点。我建议这个：

在生成列时为每个.select-image 元素添加data-index 属性（第11 行）。
需要索引时检索此属性。不要使用$(this).index()，而是使用$(this).data('index')。

$(document).ready(function() {

  //create elements
  $('.slider').each(function() {
    $slider = $(this);
    var $slider_block = $slider.find($('.slider-block'));
    $slider_block.append('<div class="pagination-slider"></div>') //add the div for the pagination

    var titles_pagination = $slider.find($('.slider-title'));
    titles_pagination.each(function(index) {
      $slider.find($('.pagination-slider')).append('<div class="select-image" alt="go to image" data-index="' + index + '" role="tab" tabindex="0"><span>' + $(this).text() + "</span></div>") //gets the titles and relative urls to the slider items
    });

    $slider.find($('.imageslide')).each(function(i, el) { //add a numbered id for each figure
      $(el).attr('id', 'image-num-' + i);
    });

    //if there are more than 8 figures, make 2 columns of selection buttons
    i = 0;
    lenChild = $('.select-image').length;
    if (lenChild >= 8) {
      var parentContainer = $('.pagination-slider');
      v2 = (Math.floor(lenChild / 8) * 8);
      parentElem = 0;
      jQuery(this).find('.select-image').each(function() {
        if (i < v2) {
          if (i % 8 == 0) {
            if (i != 0)
              jQuery(parentElem).appendTo(jQuery(parentContainer));
            parentElem = jQuery('<div class="column-slider"></div>');
          }
          jQuery(this).appendTo(jQuery(parentElem));
          i++;
        }
      });
      jQuery(parentElem).appendTo(jQuery(parentContainer));
    }
  });
  //select and change figure

  $('.slider').each(function() {
    $slider = $(this);

    var $slides = $slider.find($('.imageslide'));
    var $selectors = $slider.find($('.select-image'));

    $slides.first().addClass('current').show();
    $selectors.first().addClass('selected');

    $selectors.click(function() {
      var index = $(this).data('index'); //the index of the selector
      var $nextSlide = $slides.eq(index);
      // don't do anything if same indexed slide already has current class
      if (!$nextSlide.hasClass('current')) {
        $slides.filter('.current').removeClass('current').fadeOut(function() {
          $selectors.filter('.selected').removeClass('selected')
          $nextSlide.addClass('current').fadeIn()
          $selectors.eq(index).addClass('selected');
        });
      }
    });
  });
});

.imageslide {
  display: none;
  border: 3px solid black;
  padding: 10px;
  position: relative;
}

.slider-block {
  justify-content: center;
  display: flex;
}

.slider-title {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  background-color: black;
  color: white;
}

.pagination-slider {
  margin-top: 1em;
}

.column-slider{
  float: left;
}

.select-image {
  background-color: #fa648f;
  padding: 0.6em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  margin: 0.5em;
  cursor: pointer;
}

.select-image::after {
  content: "";
  position: relative;
  height: 3px;
  left: 0;
  top: 0.6em;
  /*same as padding*/
  display: block;
  width: 100%;
  background-color: #000;
  transform: scaleX(0);
  visibility: hidden;
  transition: all 0.3 ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.select-image:hover::after,
.select-image:focus::after {
  transform: scaleX(1);
  visibility: visible;
}

.select-image.selected {
  border: 3px solid black;
}

.select-image.selected:hover::after,
.select-image.selected:focus::after {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider-block">
    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 1</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMERO ITEM"><img draggable="false" src="INDIRIZZO IMMAGINE" /><span class="slider-title">Fig 2</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 3</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 4</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 5</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 6</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 7</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 8</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 9</span></a>
    </figure>

    <figure class="imageslide">
      <a class="item-slider" draggable="false" href="../item/NUMEROITEM"><img draggable="false" src="IMMAGINE" /><span class="slider-title">Fig 10</span></a>
    </figure>

  </div>
</div>

【讨论】：

这很好用，谢谢！