Установить атрибут данных для всех элементов в массиве, кроме этого элемента - PullRequest
Новая
       11

Установить атрибут данных для всех элементов в массиве, кроме этого элемента

0 голосов
/ 28 января 2020

Это моя разметка 

<div class="parent">
  <img data-position="1" src="">
  <img data-position="2" src="">
  <img data-position="3" src="">
  <img data-position="4" src="">
</div>

Когда щелкнул любой из элементов img, для выбранного элемента должен быть установлен data-position на 1, а остальные элементы должны следовать с data-position="2" и так далее. Чтобы достичь этого, я не могу добавлять или переставлять элементы, так как это не будет иметь никакого эффекта.

Это то, что я пробовал. Я подумал, почему бы не получить все эти not(this) элементы, поставить их через l oop и назначить атрибуты данных. 

var img = $('img')
img.on('click', function() {
    var otherElements = img.not(this).length;
    console.log(otherElements)
});

Этот фрагмент кода работает правильно с первого раза, но во второй раз я получаю другие результаты.

Ответы [ 3 ]

1 голос
/ 28 января 2020

Вы можете сделать not(this), как вы изначально показывали, а затем обновить позицию данных на них. Затем обновите позицию данных на одном клике, в какой-то момент, до 1. 

var $images = $('img').on('click', function(){
  $images.not(this).attr('data-position', function(index){
    return index + 2;
  });
  
  $(this).attr('data-position', 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <img data-position="1" src="" alt="one">
  <img data-position="2" src="" alt="two">
  <img data-position="3" src="" alt="three">
  <img data-position="4" src="" alt="four">
</div>
0 голосов
/ 28 января 2020

Мое решение заключается в настройке прослушивателя событий для родителя, чтобы было проще запрашивать и манипулировать его дочерними элементами. Элементы, которые предшествовали выбранной цели, будут «перенесены» и продолжат нумерацию, начиная с которой последний элемент массива остался. 

const $parent = $('.parent');
const $children = $parent.children();
const childrenLength = $children.length;
$parent.on('click', e => {
  const clickedIndex = $children.index(e.target);
  let rearange = 1;
  $children.each((i, el) => {
    if (i < clickedIndex) {
      el.dataset.position = (childrenLength - clickedIndex + 1) + i;
    } else {
      el.dataset.position = rearange++;
    }
  });
});

Пример выполнения: jsfiddle

0 голосов
/ 28 января 2020

Проверьте эту скрипку: https://jsfiddle.net/yam1hox6/1/

Вот важный код: 

var imgs = $('div.parent > img')
imgs.on('click', function(index) {
    $(this).attr("data-position", "1");
    var otherElements = imgs.not(this);
    otherElements.each(function(index) {
        $(this).attr("data-position", index+2);
    })

    // Optionally, uncomment the next 3 lines to output the data-positions
    //$(imgs).each(function(index) {
    //  console.log(index, $(this).attr("data-position"));
    //});
});
...