问题1

Question

我正在研究一些简单的问题作为考试的练习，但大部分问题对我来说没有任何答案可以检查我是否不知道。有一个我真的不确定，所以我可以在这里查看。问题是：

假设我们有一个包含以下两行的HTML文档：

<Body>
<H1 title = "When this is clicked, the section changes"> Title </ h1> 
<P id = "first" title = "When this is clicked, the title is centered"> First section: Original version. </ P>
</ Body>

键入将更改此页面外观的代码，以便：

•单击h1标题时，该部分将从＆＃34;第一部分：原始版本＆＃34;到＆＃34;第一部分：修改版本＆＃34;。

•单击该部分时，标题的位置会更改并居中。

希望有人可以帮我学习这个，所以如果我的考试中出现类似的东西，我会得到答案:)

Answer 1

var h1 = document.querySelector('h1');
var first = document.querySelector('#first');

h1.addEventListener('click', function() {
  first.innerText = 'First section: modified version.';
});

first.addEventListener('click', function() {
  h1.style.textAlign = 'center';
});

Answer 2

这是你在找什么？

$(document).on("click", "h1", function() {
  $(this).css("text-align", "center");
})

p, h1 {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 title="When this is clicked, the section changes"> Title </h1>
<p id="first" title="When this is clicked, the title is centered"> First section: Original version. </p>

Answer 3

正如其他人所提到的，您应该可以在Google上找到所有内容。但是为了帮助你，答案应该是：

var heading = document.getElementsByTagName("h1")[0];
var section = document.getElementById("first");

heading.addEventListener("click", function() {
    section.innerText = "First section: modified version";
});

section.addEventListener("click", function() {
    heading.setAttribute("style", "text-align: center");
});

<h1 title="When this is clicked, the section changes">Title</h1>
<p id="first" title="When this is clicked, the title is centered">First section: Original version.</p>

Answer 4

首先请将您的html标记更正为标准并添加一些javascript代码。请查看以下代码段：

＆＃13;

$(document).on('click', 'h1', function(){
  $('#first').text('First section: Modified version.');
});
$(document).on('click', '#first', function(){
  $('h1').css('text-align','center');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1 title = "When this is clicked, the section changes"> Title </h1> 
<P id = "first" title = "When this is clicked, the title is centered"> First section: Original version. </ P>
</body>

＆＃13;

Answer 5

我真的不知道你为什么要在这里投票。从我收集的内容来看，你已经在所有指定的问题上尽了最大的努力，而这一次碰巧让你感到难过......

无论如何..这个问题有一些不同的问题需要解决才能完成这个问题。我将尝试将这些内容分解为组件，然后解释可帮助我们达到您想要的位置。

问题1

通过这一点思考，以下是解决问题的步骤。

找到一种方式来＆＃34;听＆＃34;对于＆＃34;点击事件＆＃34;在<h1>元素上。
找到一种方法，在点击<p>元素时，将<h1>元素中的文字更改为所需的文字。

这里有一些子步骤，但这应该让我们开始。

要解决此问题，我们需要找到一种方法来选择页面上的元素。谷歌搜索只根据您提供的代码，在vanilla JS中提供了一些方法。

查询选择器：document.querySelector和document.querySelectorAll
代码选择器：document.getElementsByTagName

还有很多其他内容，但只使用您提供的代码，并假设我们不允许添加类属性或任何内容，我们将推出上述选项。

上面的选择器都返回HTML＆＃34;节点＆＃34;从页面。您可以将HTML节点视为构成HTML页面的对象。它们具有各种属性，我们可以对它们执行许多操作。

最好的办法是使用第一个建议document.querySelector，因为它会根据传递的选择器返回单个HTML节点。但要小心。如果我们有多个相同的元素，它将只返回第一个没有用的元素。

以下是您可以阅读的一些文档以及一些示例，可帮助您了解其工作原理。

document.querySelector documentation

现在我们可以选择页面上的<h1>元素。

document.querySelector(h1);

现在，我们需要一种方法来监听事件。搜索＆＃34;听取香草JS＆＃34;中的事件。会带你到addEventListener方法，它允许我们监听给定HTML元素上的事件。

eventListener documentation

现在我们可以把这两个放在一起，我们有一个监听事件的<h1>元素。我将稍微跳过一点并填写函数，以便我们有。

let title = document.querySelector('h1');

title.addEventListener('click', function() {
    alert('I just clicked the title');
});

如果您将其插入并单击标题，则会看到弹出的模式，表示您单击了标题。一步下来。

现在，我们必须找到一种方法来改变＆＃34;文本内容＆＃34; <p>元素到所需文本的位置。为此，我们首先需要选择<p>元素并将其存储在变量中。你现在知道如何做到这一点，所以我会告诉你。

现在我们已经引用了要修改的节点，我们需要更改与该文本相关的该节点的属性。 Google对此进行搜索会返回一些不同的属性，但我会向您推送正确的方向并告诉您需要elem.textContent属性。

将所有内容放在一起，这里有我的代码，可以满足您对第一个问题的要求。

let headerTxt = document.querySelector('h1');
let sectionTxt = document.querySelector('p');

headerTxt.addEventListener('click', function() {
  sectionTxt.textContent = 'First section: modified version';
});

问题2

这里的第一个问题有些相似之处。我们需要......

同时选择页面上的<h1>和<p>元素（完成）
向<p>元素居中的<h1>元素添加点击事件监听器。

我们可以跳过第一篇文章，因为我们在问题1中这样做了。我也会跳过向<p>添加一个事件监听器，因为我们做了类似于第一个问题的事情。< / p>

添加事件侦听器后，我们需要一种方法来更改HTML元素中某些文本的文本对齐方式。

Google搜索将我们带到textAlign CSS属性，我们可以使用JS修改它。

textAlign

将这些全部放在一起，这里是完整的解决方案

＆＃13;

let headerTxt = document.querySelector('h1');
let sectionTxt = document.querySelector('p');

headerTxt.addEventListener('click', function() {
  sectionTxt.textContent = 'First section: modified version';
});

sectionTxt.addEventListener('click', function() {
  headerTxt.style.textAlign = 'center';
});

＆＃13;

<body>
<h1 title = "When this is clicked, the section changes"> Title </h1> 
<p id = "first" title = "When this is clicked, the title is centered"> First section: Original version. </p>
</body>

＆＃13;

希望这有助于男人。我给你的一些建议是习惯于搜索并习惯阅读文档。我也是一个初学者，我很快就想到了这一点。

单击时如何更改h1 tittle /使截面居中

5 个答案:

问题1

问题2

将这些全部放在一起，这里是完整的解决方案