Question

我有一个导航列表以及单独的标题和文本段落。每个列表项都有自己的标题和文本。当您将鼠标悬停在导航项目上时，我希望切换主标题和文本。

的jsfiddle

目前我的代码显示所有文字。我只想显示H1＆amp;在课程名称.spot_titles中找到的P文字：https://jsfiddle.net/d28zh777/

说明我想要实现的目标：

当您将鼠标悬停在痤疮或油腻之上时，或者上面的标题和文字应该改变为您正在盘旋的任何项目。这是活跃的状态，也是我想要实现的目标：

的jQuery

// Get the original content
var main_url = $(".index__hero-image").css('background-image');
var main_title = $(".index__hero-image h1").text();
var main_text = $(".index__hero-image p").text();

$(".index__spot").hover(function () {
  var image_url = $(this).css('background-image');
  // These vars below are wrong I think. 
  var spottitle = $(this).text();
  var spottext = $(this).text();

  $(".index__hero-image").css('background-image', image_url);
  $(".index__hero-image h1").text(spottitle);
  $(".index__hero-image p").text(spottext);
},
function() {
  // Display original content when nothing hovered
  $(".index__hero-image").css('background-image', main_url);
  $(".index__hero-image h1").text(main_title);
  $(".index__hero-image p").text(main_text);
});

HTML

<div class=" index__text-block">
  <h1>Original headline</h1>
  <p>Original text block goes here</p>
</div>

<div class="solutions-bar">
<a href="acne.html" class="index__spot" style="background-image: url('http://placekitten.com/700/700');">
<!-- Ignore next 3 lines / Create the icon in the link list -->
<img src="icon.png">
<h6 class="content-1">Acne</h6>
<h6 class="content-2">Shop Now</h6>

<!-- Use this text to replace that in index__text-block -->
<div class="spot_titles">
  <h1>Acne headline</h1>
  <p>
    Some text relating to acne
  </p>
</div>

Answer 1

更改此行：

var spottitle = $(this).text();
var spottext = $(this).text();

到此：

var spottitle = $(this).find('.spot_titles h1').text();
var spottext = $(this).find('.spot_titles p').text();

这将获得h1内的.spot_titles和p内的.spot_titles。

您可以在jQuery API Documentation上详细了解find()。

Answer 2

由于您需要定位子元素文本，因此请使用.find()和有效的选择器

// These vars below are wrong I think.
var spottitle = $(this).find('.spot_titles h1').text();
var spottext = $(this).find('.spot_titles p').text();

Fiddle

从子元素jquery

2 个答案: