为什么我不能使用array.indexOf（this.innerHTML）？

时间：2019-06-08 00:14:18

标签： javascript html css arrays ecmascript-6

所以我在页脚中有一个链接列表，我希望能够单击一个链接，并将其替换为列表顶部的链接（如果还没有的话）。到目前为止，我可以将单击的链接移动到顶部，但是我不知道如何将顶部链接移动到被单击的链接的位置？我试过使用indexOf（this.innerHTML），但它不是功能。

编辑：我也尝试过nodeList.item（），它也没有用：（

const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = document.querySelectorAll('.links a');
const header = document.querySelector('header');

for (var i = 0; i < navLinks.length; i++) {
	navLinks[i].addEventListener('click', changeColor);
}

for (var i = 0; i < footerLinks.length; i++) {
	footerLinks[i].addEventListener('click', changePosition);
}

function changeColor() {
	header.style.background = 'red';

	setTimeout(function() {
		header.style.backgroundImage = 'url(img/canada.jpeg)';
	}, 2000);
}

function changePosition() {
	if(footerLinks[0] !== this) {
		footerLinks[0].innerHTML = this.innerHTML;
		// this.innerHTML = footerLinks[0].innerHTML;
	}

	console.log(footerLinks.indexOf(this.innerHTML));
}
html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Verdana';
	box-sizing: border-box;
	color: #63889b;
}

/** {
	outline: 1px solid red;
}*/

/*------NAV-----*/

nav {
	display: flex;
	justify-content: space-between;
	font-size: 1.8rem;
	padding: 25px 0;
	position: fixed;
	background-color: #fff;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.brand, .nav-links {
	display: flex;
	align-items: center;
}

.brand {
	margin-left: 6%;
}

.logo {
	max-width: 70px;
	max-height: 45px;
	margin-right: 25px;
}

.nav-links {
	position: relative;
	margin-right: 6%;
}

.nav-links .link {
	text-transform: uppercase;
	margin-right: 20px;
	cursor: pointer;
	transition: all .2s ease;
}

.nav-links .link:hover {
	color: #014263;
}

/*-----HEADER-----*/

header {
	margin-top: 92px;
	background-image: url(img/canada.jpeg);
	/*background-position: center;
	background-size: cover;*/
	padding-top: 7%;
	padding-bottom: 25%;
	transition: all .3s ease;
}

.header-info {
	color: #fff;
	font-size: 1.5rem;
	width: 26%;
	margin-left: 10%;
}

header p {
	margin: 0;
	background-color: rgba(0,0,0,0.6);
	padding: 10px 25px;
}

header p:first-child {
	padding-top: 25px
}

header p:last-child {
	padding-bottom: 25px;
}

/*-----MAIN-----*/

main {
	display: flex;

}

.col {
	flex-basis: 33.33%;
	padding: 50px 0;
}

.col p {
	width: 65%;
	font-size: 1.25rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.col img {
	display: block;
	margin: 0 auto;
}

.col-3 img {
	width: 280px;
	height: 155px;
}

.col-3 img, .col-3 h3, .col-3 p {
	position: relative;
	top: -8px;
}

.col-2 img, .col-2 h3, .col-2 p {
	position: relative;
	top: 30px;
}

.col-1 {
	margin-left: 7%;
}

.col-3 {
	margin-right: 7%;
}

h3 {
	text-align: center;
}

/*------FOOTER-----*/

footer {
	font-family: 'Helvetica';
	background-color: #63889b;
	display: flex;
	justify-content: space-between;
	color: #fff;
	padding-bottom: 30px;
}

.internal-links {
	padding-left: 20%;
	font-size: 1.5rem;
}

a {
	text-decoration: none;
	margin:2px 0;
	color: #fff;
	cursor: pointer;
}

.internal-links h4 {
	text-decoration: underline;
	text-align: center;
	margin-bottom: 8px;
	color: #fff;
}

.links {
	font-size: 1.3rem; 
	display: flex;
	flex-direction: column;
}

.form-wrap {
	display: flex;
	align-items: flex-end;
	flex-basis: 50%;
}

form {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	width: 80%;
}

input {
	border: none;
	outline: none;
	font-size: 1.6rem;
}

label {
	font-size: 1.3rem;
	padding: 3px 0;
}

button {
	margin-top: 20px;
	border: 1px solid #fff;
	width: 50%;
	font-size: 1.3rem;
	background-color: #1090d1;
	align-self: flex-end;
	color: #fff;
	padding: 4px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Chapman Automotive Skills Assessment</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<nav>
		<div class="brand">
		<img src="img/Logo.png" alt="logo" class="logo">
		<div class="comp-name">CHAPMAN</div>
		</div>

		<div class="nav-links">
			<div class="link">Home</div>
			<div class="link">Sales</div>
			<div class="link">Blog</div>
			<div class="link">Login</div>
		</div>
	</nav>
	<header>
		<div class="header-info">
			<p>We are a company that does stuff.</p>
			<p>Car and web stuff.</p>
		</div>
	</header>
	<main>
		<div class="col col-1">
			<img src="img/car1.jpg" alt="car1">

			<h3>Some Header</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
		</div>

		<div class="col col-2">
			<img src="img/car2.jpg" alt="car2">

			<h3>More Stuff</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
		</div>

		<div class="col col-3">
			<img src="img/car3.jpg" alt="car3">

			<h3>Last Column</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
		</div>
	</main>
	<footer id="footer">
		<div class="internal-links">
			<h4>Internal Links</h4>

			<div class="links">
				<a href="#footer">Page One</a>
				<a href="#footer">Another Page</a>
				<a href="#footer">Sales Page</a>
				<a href="#footer">Page Three</a>
				<a href="#footer">Keep Going</a>
				<a href="#footer">Last One</a>
				<a href="#footer">Just Kidding</a>
			</div>
		</div>

		<div class="form-wrap">
			<form>
				<label for="Name">Name</label>
				<input type="text" id="Name">
				<label for="Name">Address</label>
				<input type="text" id="Address">
				<label for="Name">City</label>
				<input type="text" id="City">

				<button type="submit">Submit Form</button>
				</form>
	</footer>
	<script src="script.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

querySelectorAll返回一个静态NodeList，它不是一个数组。要将其转换为数组，请使用扩展[...]，它是HTML元素的集合，因此您需要使用indexOf(this)，而不是indexOf(this.innerHTML)（因为它不是字符串数组）。< / p> 

const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = document.querySelectorAll('.links a');
const header = document.querySelector('header');

for (var i = 0; i < navLinks.length; i++) {
  navLinks[i].addEventListener('click', changeColor);
}

for (var i = 0; i < footerLinks.length; i++) {
  footerLinks[i].addEventListener('click', changePosition);
}

function changeColor() {
  header.style.background = 'red';

  setTimeout(function() {
    header.style.backgroundImage = 'url(img/canada.jpeg)';
  }, 2000);
}

function changePosition() {
  if (footerLinks[0] !== this) {
    footerLinks[0].innerHTML = this.innerHTML;
    // this.innerHTML = footerLinks[0].innerHTML;
  }

  console.log([...footerLinks].indexOf(this));
}
html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Verdana';
  box-sizing: border-box;
  color: #63889b;
}


/** {
	outline: 1px solid red;
}*/


/*------NAV-----*/

nav {
  display: flex;
  justify-content: space-between;
  font-size: 1.8rem;
  padding: 25px 0;
  position: fixed;
  background-color: #fff;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.brand,
.nav-links {
  display: flex;
  align-items: center;
}

.brand {
  margin-left: 6%;
}

.logo {
  max-width: 70px;
  max-height: 45px;
  margin-right: 25px;
}

.nav-links {
  position: relative;
  margin-right: 6%;
}

.nav-links .link {
  text-transform: uppercase;
  margin-right: 20px;
  cursor: pointer;
  transition: all .2s ease;
}

.nav-links .link:hover {
  color: #014263;
}


/*-----HEADER-----*/

header {
  margin-top: 92px;
  background-image: url(img/canada.jpeg);
  /*background-position: center;
	background-size: cover;*/
  padding-top: 7%;
  padding-bottom: 25%;
  transition: all .3s ease;
}

.header-info {
  color: #fff;
  font-size: 1.5rem;
  width: 26%;
  margin-left: 10%;
}

header p {
  margin: 0;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px 25px;
}

header p:first-child {
  padding-top: 25px
}

header p:last-child {
  padding-bottom: 25px;
}


/*-----MAIN-----*/

main {
  display: flex;
}

.col {
  flex-basis: 33.33%;
  padding: 50px 0;
}

.col p {
  width: 65%;
  font-size: 1.25rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.col img {
  display: block;
  margin: 0 auto;
}

.col-3 img {
  width: 280px;
  height: 155px;
}

.col-3 img,
.col-3 h3,
.col-3 p {
  position: relative;
  top: -8px;
}

.col-2 img,
.col-2 h3,
.col-2 p {
  position: relative;
  top: 30px;
}

.col-1 {
  margin-left: 7%;
}

.col-3 {
  margin-right: 7%;
}

h3 {
  text-align: center;
}


/*------FOOTER-----*/

footer {
  font-family: 'Helvetica';
  background-color: #63889b;
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding-bottom: 30px;
}

.internal-links {
  padding-left: 20%;
  font-size: 1.5rem;
}

a {
  text-decoration: none;
  margin: 2px 0;
  color: #fff;
  cursor: pointer;
}

.internal-links h4 {
  text-decoration: underline;
  text-align: center;
  margin-bottom: 8px;
  color: #fff;
}

.links {
  font-size: 1.3rem;
  display: flex;
  flex-direction: column;
}

.form-wrap {
  display: flex;
  align-items: flex-end;
  flex-basis: 50%;
}

form {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  width: 80%;
}

input {
  border: none;
  outline: none;
  font-size: 1.6rem;
}

label {
  font-size: 1.3rem;
  padding: 3px 0;
}

button {
  margin-top: 20px;
  border: 1px solid #fff;
  width: 50%;
  font-size: 1.3rem;
  background-color: #1090d1;
  align-self: flex-end;
  color: #fff;
  padding: 4px 30px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Chapman Automotive Skills Assessment</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <div class="brand">
      <img src="img/Logo.png" alt="logo" class="logo">
      <div class="comp-name">CHAPMAN</div>
    </div>

    <div class="nav-links">
      <div class="link">Home</div>
      <div class="link">Sales</div>
      <div class="link">Blog</div>
      <div class="link">Login</div>
    </div>
  </nav>
  <header>
    <div class="header-info">
      <p>We are a company that does stuff.</p>
      <p>Car and web stuff.</p>
    </div>
  </header>
  <main>
    <div class="col col-1">
      <img src="img/car1.jpg" alt="car1">

      <h3>Some Header</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
    </div>

    <div class="col col-2">
      <img src="img/car2.jpg" alt="car2">

      <h3>More Stuff</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
    </div>

    <div class="col col-3">
      <img src="img/car3.jpg" alt="car3">

      <h3>Last Column</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
    </div>
  </main>
  <footer id="footer">
    <div class="internal-links">
      <h4>Internal Links</h4>

      <div class="links">
        <a href="#footer">Page One</a>
        <a href="#footer">Another Page</a>
        <a href="#footer">Sales Page</a>
        <a href="#footer">Page Three</a>
        <a href="#footer">Keep Going</a>
        <a href="#footer">Last One</a>
        <a href="#footer">Just Kidding</a>
      </div>
    </div>

    <div class="form-wrap">
      <form>
        <label for="Name">Name</label>
        <input type="text" id="Name">
        <label for="Name">Address</label>
        <input type="text" id="Address">
        <label for="Name">City</label>
        <input type="text" id="City">

        <button type="submit">Submit Form</button>
      </form>
  </footer>
  <script src="script.js"></script>
</body>

</html>

相关问题
最新问题