Question

我想要一个带有不同文本的不同图像的列表。在加载时，我希望图像的顺序和文本的顺序都可以随机化，但是每个列表项都包含一个图像和一个文本。然后，我想将此随机组合用于网址。

所以我说：

struct TouchGestureViewModifier: ViewModifier {
    let touchBegan: () -> Void
    let touchEnd: (Bool) -> Void

    @State private var hasBegun = false
    @State private var hasEnded = false

    private func isTooFar(_ translation: CGSize) -> Bool {
        let distance = sqrt(pow(translation.width, 2) + pow(translation.height, 2))
        return distance >= 20.0
    }

    func body(content: Content) -> some View {
        content.gesture(DragGesture(minimumDistance: 0)
                .onChanged { event in
                    guard !self.hasEnded else { return }

                    if self.hasBegun == false {
                        self.hasBegun = true
                        self.touchBegan()
                    } else if self.isTooFar(event.translation) {
                        self.hasEnded = true
                        self.touchEnd(false)
                    }
                }
                .onEnded { event in
                    if !self.hasEnded {
                        let success = !self.isTooFar(event.translation)
                        self.touchEnd(success)
                    }
                    self.hasBegun = false
                    self.hasEnded = false
                })
    }
}

extension View {
    func onTouchGesture(touchBegan: @escaping () -> Void,
                      touchEnd: @escaping (Bool) -> Void) -> some View {
        modifier(TouchGestureViewModifier(touchBegan: touchBegan, touchEnd: touchEnd))
    }
}

但是我希望这种组合是随机的，因此下一位访客可能会看到：

<ul>
<li><img id="pic1" src="pic1.jpg" /> <h2>Cat</h2></li>
<li><img id="pic2" src="pic2.jpg" /> <h2>Dog</h2></li>
<li><img id="pic3" src="pic3.jpg" /> <h2>Elephant</h2></li>
</ul>

此外，我还想知道文本和图像的组合，并将其用于url，如下所示：

<ul>
<li><img id="pic2” src="pic2.jpg" /> <h2>Elephant</h2></li>
<li><img id="pic1” src="pic1.jpg" /> <h2>Dog</h2></li>
<li><img id="pic3” src="pic3.jpg" /> <h2>Cat</h2></li>
</ul>

希望有人可以帮助我！

Answer 1

我将发布答案，但是如果@epascarello提供了一个答案，我会很乐意将其删除，因为他确实提供了我所展示的内容的基础，并且我正在努力提供有效的{{3} }

首先，我可能不会使用HTML定义的内容作为列表（文本和图像）的来源。我曾经用某种数组来存储它们。

  var textList = ['Elephant', 'Dog', 'Cat'];
  var imgList = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg']

假设您的数组将始终包含相同数量的数据（即，将始终具有相同的长度），则可以循环一个长度，并从每个数组中随机选择一个，然后从那里生成HTML：

var textList = ['Elephant', 'Dog', 'Cat'];
var imgList = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg'];

var randomImgIndexArr = generateUniqueIndexArray([], imgList);
var randomTextIndexArr = generateUniqueIndexArray([], textList);

function generateUniqueIndexArray(array, list) {
  while(array.length < list.length) {
      var randomIndex = Math.floor(Math.random() * list.length);
      if(array.indexOf(randomIndex) === -1) array.push(randomIndex);
  }

  return array;
}


textList.forEach(function(item, index) {
  var textStr = textList[randomTextIndexArr[index]];
  var image = imgList[randomImgIndexArr[index]];

  var li = $('<li/>');
  var aHref = $('<a/>', { href: textStr + '_' + image, text: textStr });
  var imgElm = $('<img/>', { src: image, id: image });

  $(li).append(aHref).append(imgElm).appendTo($('ul'));
});

Answer 2

Array.sort以及伪随机回调函数都是不错的选择。内置的Set类型可以帮助确保图像src和标题都是唯一的。

textList 比 imgList 多包含1个项目。当输入数组中的一个元素比另一个数组中的元素更多时，逻辑将从最长的数组中删除多余的项目，以便在处理结束时可以使用它们的索引将两个数组中的项目关联起来。

let $list = $('ul')
  // Pseudo randomly return negative or positive number
  , sorter = () => 0.5-Math.random()
  // Use Set container for uniqueness
  , s = new Set()
  , setFilter = el => !s.has(el) && s.add(el)
  // Initialize, apply unique filter and shuffle both input lists
  , textList = ['Elephant', 'Elephant', 'Dog', 'Cat', 'Bird', 'Duck'].filter(setFilter).sort(sorter)
  , imgList = ['/img/pic1.jpg', '/img/pic1.jpg', '/img/pic2.jpg', '/img/pic3.jpg', '/img/pic4.jpg'].filter(setFilter).sort(sorter)
  // Prepare length adjustement
  , compared = textList.length >= imgList.length ? [textList, imgList]: [imgList, textList];
;

// Make sure both arrays have the same length.
compared[0].splice(compared[1].length);


// Associate every item from both (now randomized) lists
[...imgList].forEach(
    (img, i) => void $(`<li><a href="${img}"><h2>${textList[i]}</h2> (${img})</a>`).appendTo($list)
);

body {font-size: 12px}
h2 {display: inline-block}
ul {list-style: none}
li {padding: 0; margin: 0} li ~ li {margin-top: 5px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul></ul>

随机列表组合和顺序

2 个答案: