用javascript更改html id [重复]答案

【问题标题】：Change html id with javascript [duplicate]用javascript更改html id [重复]
【发布时间】：2018-02-24 02:57:33
【问题描述】：

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Practice</title>
<script src="my.js"></script>
<link rel="stylesheet" href="my.css" />
</head>
<body>
<h1>Practice Page</h1>

<p>click on ^ to show am
<code class="js">alert()</code>.</p>

<p id="hoverable">Put your mouse here to make every paragraph red <code class="html">&lt;p&gt;</code> get the class
<code class="h">highlighted</code></p>

我已经导入了一个 jquery 文件和另一个未包含在此处的 jquery 文件，我当前的 javascript 代码如下：

head = function() {
  alert("I'm a heading");
}

redtext=function(){
    $('hoverable').attr("#hoverable","#highlighted");

}
setup = function() {
  jQuery('h1').click(head);
  jQuery('p').mouseover(red);    

}
jQuery(document).ready(setup)

我的 css 代码是：

.highlighted {
  color: red;
}

我正在努力做到这一点，所以当我突出显示可悬停的 ID 时，所有段落都会变为红色，因此所有段落的新 ID 都会突出显示，我尝试更改 ID，但我似乎无法让它工作

【问题讨论】：

$('#hoverable').on('mouseenter', function() { $('body *').addClass('highlighted') })。请注意，这是 jQuery（这是一个用 Javascript 编写的库，但它不是 Javascript）。
那么我会将它放入我的颜色函数中，然后从我的设置中调用它吗？或者直接将其输入到我的就绪函数中
在你的设置函数中。

标签： javascript html css

【解决方案1】：

要按 ID 选择元素，请使用代码中缺少的“#”。

从您的颜色函数中更改以下行 -

$('hoverable').attr("#hoverable","#highlighted");

如果突出显示的是 ID，则到以下内容 -

$('#hoverable').attr("id","highlighted");

如果突出显示的是一个类，

$('#hoverable').attr("class","highlighted");

【讨论】：

highlighted 是他代码中的一个类，而不是一个 id。
@Monica 非常感谢！这使得可悬停的更改变为突出显示，如果我想在鼠标悬停时也更改段落，我会做同样的事情并添加一个 p 设置吗？或添加一个新功能，因为当我将鼠标悬停在“单击此段落”时我不希望它是红色的，但当我们将鼠标悬停在第二段时它是红色的
@Monicka 不要使用attr 添加类，因为它将替换元素上的所有现有类。使用$(selector).addClass('classname')。
color=function(){ $('#hoverable').attr("class","highlighted"); $('p').addClass('hoverable) 或 color=function(){ $('#hoverable').addClass('highlighted'); $('p').addClass('highlighted'); ?
是的@connexo 是对的。当您有多个段落时，请使用 ID 标记而不是元素。例如在你的情况下 - 你可以说 - jQuery('#hoverable').mouseover(color);