Question

目前我的网页是这样的：

// Hover Function

$("#cats_image").mouseover(function() {
  $("h1").text("Cats");
});

$("#dogs_image").mouseover(function() {
  $("h1").text("Dogs");
});

$("#ducks_image").mouseover(function() {
  $("h1").text("Ducks");
});

$("img").mouseout(function() {
  $("h1").text("Animals");
});


// Click Function

$("#cats_image").click(function() {
  $("h1").text("Cats");
  $("footer div").removeClass("show");
  $("#cats_text").addClass("show");
});

$("#dogs_image").click(function() {
  $("h1").text("Dogs");
  $("footer div").removeClass("show");
  $("#dogs_text").addClass("show");
});

$("#ducks_image").click(function() {
  $("h1").text("Dogs");
  $("footer div").removeClass("show");
  $("#ducks_text").addClass("show");
});

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-weight: normal;
}

header {
  width: 100%;
}

main {}

img {
  max-width: 200px;
  cursor: pointer;
}

footer div {
  display: none;
}

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <h1>Animals</h1>
</header>

<main>
  <img id="cats_image" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Mackerel_tabby_cat_pair-Hisashi-01.jpg">
  <img id="dogs_image" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Two_puppies_dogs.jpg">
  <img id="ducks_image" src="https://upload.wikimedia.org/wikipedia/commons/c/c8/The_pair_of_ducks.jpg">
</main>

<footer>
  <div id="cats_text">Domestic cats are valued by humans for companionship and their ability to hunt rodents.</div>
  <div id="dogs_text">The coats of domestic dogs are of two varieties: "double" being familiar with dogs (as well as wolves) originating from colder climates, made up of a coarse guard.</div>
  <div id="ducks_text">Duck is the common name for numerous species in the waterfowl family Anatidae which also includes swans and geese.</div>
</footer>

乍一看，悬停功能看起来很完美。但是，例如，如果单击一个图像，则只要不单击另一图像，标题（“猫”，“狗”或“鸭子”）就应停留在该位置。如果单击白色区域（在图像和文本区域之外），则看起来之前没有单击任何内容（标题：“动物”，没有页脚文本）。

我尝试了很多，但我绝对不确定如何继续。有人可以帮我吗？

Answer 1

此操作不起作用，因为在mouseout事件中将标题设置为Animals。这意味着，您确实需要像下面的代码行一样设置标题的全局值。

let selected_animal = "Animals"

// Hover Function

$("#cats_image").mouseover(function() {
  $("h1").text("Cats");
});

$("#dogs_image").mouseover(function() {
  $("h1").text("Dogs");
});

$("#ducks_image").mouseover(function() {
  $("h1").text("Ducks");
});

$("img").mouseout(function() {
  $("h1").text(selected_animal);
});


// Click Function

$("#cats_image").click(function() {
  selected_animal = "Cats"
  $("h1").text("Cats");
  $("footer div").removeClass("show");
  $("#cats_text").addClass("show");
});

$("#dogs_image").click(function() {
  selected_animal = "Dogs"
  $("h1").text("Dogs");
  $("footer div").removeClass("show");
  $("#dogs_text").addClass("show");
});

$("#ducks_image").click(function() {
  selected_animal = "Ducks"
  $("h1").text("Ducks");
  $("footer div").removeClass("show");
  $("#ducks_text").addClass("show");
});

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-weight: normal;
}

header {
  width: 100%;
}

main {}

img {
  max-width: 200px;
  cursor: pointer;
}

footer div {
  display: none;
}

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <h1>Animals</h1>
</header>

<main>
  <img id="cats_image" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Mackerel_tabby_cat_pair-Hisashi-01.jpg">
  <img id="dogs_image" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Two_puppies_dogs.jpg">
  <img id="ducks_image" src="https://upload.wikimedia.org/wikipedia/commons/c/c8/The_pair_of_ducks.jpg">
</main>

<footer>
  <div id="cats_text">Domestic cats are valued by humans for companionship and their ability to hunt rodents.</div>
  <div id="dogs_text">The coats of domestic dogs are of two varieties: "double" being familiar with dogs (as well as wolves) originating from colder climates, made up of a coarse guard.</div>
  <div id="ducks_text">Duck is the common name for numerous species in the waterfowl family Anatidae which also includes swans and geese.</div>
</footer>

jQuery：合并的单击和悬停功能的问题

1 个答案: