Question

在我的网页中，我想随机选择一串文字并在每个新条目上显示。我已经找到了一个解决方案，但是，根据每个文本字符串，我为每个文本分配了一个特定的ID。虽然普通的CSS规则适用于这些ID，但使用插件FitText.js不适用于这些ID。（我是jQuery和Javascript的初学者，所以我假设我在JS文件中放置了一个错误？）请在下面找到JSFiddle： https://jsfiddle.net/9f4w391c/

HTML：

<div id="banner">
  <h1></h1>
  <p id="fittext1">
    Fit Text
  </p>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.js"></script>

CSS：

#red {
  color: red;
}

#blue {
  color: blue;
}

#green {
  color: green;
}

#purple {
  color: purple;
}

h1 {
  color: black;
  font-size: 12pt;
}

JS：

$("#red").fitText(0.4);
$("#blue").fitText(0.4);
$("#green").fitText(0.4);
$("#purple").fitText(0.4);
$("#fittext1").fitText(0.4);
$(document).ready(function() {
  var txtArray = ['red.', 'blue.', 'green.', 'purple.'];
  var rand = txtArray[Math.floor(Math.random() * txtArray.length)]
  console.log(rand);

  if (rand == "red.") {
    $('#banner h1').attr('id', 'red');
  } else if (rand == "blue.") {
    $('#banner h1').attr('id', 'blue');
  } else if (rand == "green.") {
    $('#banner h1').attr('id', 'green');
  } else if (rand == "purple.") {
    $('#banner h1').attr('id', 'purple');
  }


  $("#banner h1:contains('')").html(rand);

});

任何帮助将不胜感激：）

将ID归因于元素会影响FitText.js

0 个答案: