时间戳

首页 > 解决方案 > 为什么我不能使用 array.indexOf(this.innerHTML)？

javascript - 为什么我不能使用 array.indexOf(this.innerHTML)？

问题描述

所以我在页脚中有一个链接列表，我希望能够单击一个链接并将其与列表顶部的链接交换，如果它还没有的话。到目前为止，我能够将被点击的链接移动到顶部，但我不知道如何将顶部链接移动到被点击的位置？我试过使用 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>

标签： javascripthtmlcssarraysecmascript-6

解决方案

querySelectorAll返回一个静态 NodeList，它不是一个数组。要将其转换为数组，使用 spread[...]是 HTML 元素的集合，所以需要使用indexOf(this), not indexOf(this.innerHTML)（因为它不是字符串数组）。

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>

推荐阅读