HTML

Question

我有一系列不同的图像，单击它们后会发生变化，基本上它们有两种状态-背面和正面，只有正面图像在变化，我的目标是显示取决于正面图像名称的不同文本，当前显示，因此如果我有1.img，则文本为“示例1文本”；如果为2.img，则为“示例2文本”。我尝试了不同的解决方案，但是它们没有按预期工作。

JAVASCRIPT：

// Part for turning images
var images = [];

(function() {
    generateCards()
})()

var cards = document.querySelectorAll('.card')

Array.from(cards).forEach(function(card) {
    card.addEventListener('click', function() {
        Array.from(card.querySelectorAll('.back, .front')).forEach(function(el) {
            ['back', 'front'].forEach(function(s) {
                el.classList.toggle(s)
            });
        });
    });
});

//Dispalying different images on click
function cardImg(index) {
    var cardNewImg = randomIntFromInterval(2, 10);
    if (images[index] !== undefined) {
        images[index] = -1;
    }
    while (images.indexOf(cardNewImg) != -1) {
        cardNewImg = randomIntFromInterval(2, 10);
    }
    images[index] = cardNewImg;
}

function generateCards() {
    for (var i = 0; i < 3; i++) {
        cardImg(i);
    }
}

function getCard(index) {
    if (!images[index].valid) {
        cardImg(index)
    }
    document["randimg" + (index + 1)].src = "./img/" + images[index] + ".jpg";
}

function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Card</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="wrap">
        <div class="card">
            <div class="front" onClick="getCard(0)"><img src="./img/1.jpg" alt=""></div>
            <div class="back"><img src="./img/2.jpg" name="randimg1"></div>
        </div>
        <div class="card">
            <div class="front" onClick="getCard(1)"><img src="./img/1.jpg" alt=""></div>
            <div class="back"><img src="./img/2.jpg" name="randimg2"></div>
        </div>
        <div class="card">
            <div class="front" onClick="getCard(2)"><img src="./img/1.jpg" alt=""></div>
            <div class="back"><img src="./img/2.jpg" name="randimg3"></div>
        </div>
    </div>
    <div class="hidden1">Text 1</div>
    <div class="hidden2">Text 2</div>
    <div class="hidden3">Text 3</div>
    <div class="hidden4">Text 4</div>
    <div class="hidden5">Text 5</div>
    <div class="hidden6">Text 6</div>
    <script src="jquery.min.js"></script>
    <script src="main.js"></script>
</body>

</html>

谢谢，我们将不胜感激！

Answer 1

var cards = document.querySelectorAll('.card')

在单击时，您可以获得img src属性并显示适当的文本：

阅读代码前的免责声明：

在下面的代码中，我假设带有隐藏文本的img和div数量相同，并且img结构中的img和隐藏div已经存在。

HTML

<div class="card">
  <div class="front"><img src="./img/1.jpg"></div>
  <div class="back"><img src="./img/2.jpg" name="randimg1"></div>
</div>
<div class="card">
  <div class="front"><img src="./img/1.jpg"></div>
  <div class="back"><img src="./img/4.jpg" name="randimg2"></div>
</div>
<div class="card">
  <div class="front"><img src="./img/1.jpg"></div>
  <div class="back"><img src="./img/6.jpg" name="randimg3"></div>
</div>


<div class="hidden">Text 1</div>
<div class="hidden">Text 2</div>
<div class="hidden">Text 3</div>
<div class="hidden">Text 4</div>
<div class="hidden">Text 5</div>
<div class="hidden">Text 6</div>

CSS

img {
  width: 50px;
  height: 50px;
  border: 1px solid black; 
}

.hidden {
  visibility: hidden;
}

Javascript

document.addEventListener('DOMContentLoaded', () => {
  var fronts = document.querySelectorAll('.front')

  fronts.forEach(function(front) {
      const hiddenTextsElements = document.querySelectorAll(".hidden")
      const imgs = document.querySelectorAll("img")

      //attaching click events to show random hidden div on each .front click
      front.addEventListener('click', function(e) {
        console.log(e.target)
          const clickedImgSrc = e.target.getAttribute("src")
          const randomHiddenTextNumber = parseInt(Math.random() * hiddenTextsElements.length)

          hiddenTextsElements[
            randomHiddenTextNumber
          ].style.visibility = "visible"

      });
  }); 
});

Codepen：

https://codepen.io/anon/pen/ZMVpWK?editors=1011

如何根据所显示的对象在单击时显示不同的文本？

1 个答案:

阅读代码前的免责声明：

HTML

CSS

Javascript