Question

当你按下按钮时，它会使用html中的onClick方法调用randomQuote（）函数。它工作正常，更改背景颜色和引号文本[rand]也有效。但是id元素没有变化。此外，它不是一个数组问题，因为如果我在randomQuote（）之外键入相同的by语句，它可以正常工作。

以下是代码：

function randomQuote(){
var rand =Math.floor(Math.random()*(quotes.length)); 
$("#qu").html(quotes[rand]); 
$("#by").html(by[rand]);
$("body").animate({backgroundColor: colorr[rand]}, 1000); 
};

（转到https://codepen.io/TheCoder21/pen/XVVxvo）获取完整代码

Answer 1

标记中的问题：

 <div class="quote">
    <blockquote id="qu">
       Here are some of my favourite quotes.Hope you enjoy them!   
       <p id="by">
         random text
       </p>
    </blockquote>
 </div>

id =“by”的容器用这个jquery方法覆盖$（“＃qu”）。html（quotes [rand]）; 如果要阻止此行为，只需将文本换行为id =“qu”的新段落：

<blockquote>
    <p id="by">
       Here are some of my favourite quotes.Hope you enjoy them!   
    </p>
    <p id="by">
       random text
    </p>
</blockquote>

Answer 2

问题是当您执行by时，blockguote元素属于id=qu元素，即$("#qu").html(quotes[rand]);元素它的html结构得到了改变。你不再拥有by元素。因此，当您尝试$("#by").html(by[rand]);时没有任何反应。因为找不到by元素。

解决方案：将by元素移到blockquote

之外

工作代码：https://codepen.io/anon/pen/MrLodd

Answer 3

你必须在blockquote中的两个段落中分隔id。你不能给出blockquote和id，然后期望段落标签也在里面拿起一个id。 blockquote会覆盖它。

<blockquote>
<p id="qu">
Here are some of my favourite quotes.Hope you enjoy them!   
  <p>
  <p id="by">
    random text
  </p>
</blockquote>

.html（）不在第二个id工作，但是在第一个id

3 个答案: