链接 alt 在悬停时出现在单独的 div 中答案

【问题标题】：Link alt appears in separate div on hover链接 alt 在悬停时出现在单独的 div 中
【发布时间】：2016-03-16 21:38:13
【问题描述】：

我对 jQuery 非常陌生，因此我将不胜感激您提供的任何帮助/建议！

我想做什么：基本上，当您将鼠标悬停在链接上时，我只需要链接的 alt 来替换父 div 的描述文本（位于单独的 div 中）。我已经让它适用于单行，但是当我有多列多行时，我遇到了问题。我似乎无法让脚本获取父元素描述，也无法用悬停文本中的 alt 替换它。 jsfiddle sample

请解释一下我做错了什么。

我的 HTML：

$(function() {
  "use strict";
  $("#description").text(id.desc);
  $("a.description").hover(
    function() {
      $("#description").text($(this).attr("desc"));
    }
  );
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div id="1" desc="Div Description for div 1" class="row">
    <div class="col-sm-4">
      <ul>
        <li>
          <h3>Link set 1-1</h3>
        </li>
        <li><a id="link1-1" desc="Sample Alt Text 1-1" href="/">Link </a>
        </li>
        <li><a id="link1-2" desc="Sample Alt Text 1-2" href="/">Link </a>
        </li>
        <li><a id="link1-3" desc="Sample Alt Text 1-3" href="/">Link </a>
        </li>
        <li><a id="link1-4" desc="Sample Alt Text 1-4" href="/">Link </a>
        </li>
      </ul>
    </div>
    <div class="col-sm-4">
      <ul>
        <li>
          <h3>Link set 1-2</h3>
        </li>
        <li><a id="link1-51" desc="Sample Alt Text 1-5" href="/">Link </a>
        </li>
        <li><a id="link1-6" desc="Sample Alt Text 1-6" href="/">Link </a>
        </li>
        <li><a id="link1-7" desc="Sample Alt Text 1-7" href="/">Link </a>
        </li>
        <li><a id="link1-8" desc="Sample Alt Text 1-8" href="/">Link </a>
        </li>
      </ul>
    </div>
    <div class="col-sm-4">
      <div id="description"></div>
    </div>
  </div>
  <div id="2" desc="Div Description for div 2" class="row">
    <div class="col-sm-4">
      <ul>
        <li>
          <h3>Link set 2-1</h3>
        </li>
        <li><a id="link2-1" desc="Sample Alt Text 2-1" href="/">Link </a>
        </li>
        <li><a id="link2-2" desc="Sample Alt Text 2-2" href="/">Link </a>
        </li>
        <li><a id="link2-3" desc="Sample Alt Text 2-3" href="/">Link </a>
        </li>
        <li><a id="link2-4" desc="Sample Alt Text 2-4" href="/">Link </a>
        </li>
      </ul>
    </div>
    <div class="col-sm-4">
      <ul>
        <li>
          <h3>Link set 2-2</h3>
        </li>
        <li><a id="link2-5" desc="Sample Alt Text 2-5" href="/">Link </a>
        </li>
        <li><a id="link2-6" desc="Sample Alt Text 2-6" href="/">Link </a>
        </li>
        <li><a id="link2-7" desc="Sample Alt Text 2-7" href="/">Link </a>
        </li>
        <li><a id="link2-8" desc="Sample Alt Text 2-8" href="/">Link </a>
        </li>
      </ul>
    </div>
    <div class="col-sm-4">
      <div id="description"></div>
    </div>
  </div>
</div>

【问题讨论】：

如果它是一个工具提示，请使用 title="" 而不是 alt，它用于图像，而不是 a 标签。另外，我没有看到任何带有类描述的标签。我现在无法深入研究，但我不太清楚您要达到的目标。是否有接近您需要的工作演示？
id 喜欢使用 desc 而不是 alt，并且出于 seo 原因没有工具提示。只是忘记将 alt 更改为 desc 将立即替换。
@RichBailo 使用有效的data-* 属性代替（data-alt="blah" 在您的特定情况下）
但是对于 SEO，链接副本会被索引，那么 a 标签之间是什么。网络爬虫很难处理 DOM 更改以进行索引。
@RichBailo 什么时候 "desc" 是一个有效的 HTML 属性？

标签： javascript jquery html

【解决方案1】：

http://jsbin.com/sosigi/edit?html,css,js,output

您不能在文档中使用重复 ID id=description。
a.description 和 你没有任何 <a class="description"。
alt 是 invalid A 元素属性，desc 对于 HTML 的属性列表是未知的。

使用有效的data-* 属性和正确的选择器

jQuery(function( $ ) {
  
  $("[data-desc]").hover(function(e) {
    var mEnter = e.type==="mouseenter";
    var $descTerget = $(this).closest(".row").find(".description");
    $descTerget.text( mEnter ? $(this).data("desc") : "");
  });
  
});

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="container">
      <div id="div1"class="row">
        <div class="col-sm-4">
          <ul>
            <li>
              <h3>Link set 1-1</h3>
            </li>
            <li><a id="link1-1" data-desc="Sample Alt Text 1-1" href="/">Link </a>
            </li>
            <li><a id="link1-2" data-desc="Sample Alt Text 1-2" href="/">Link </a>
            </li>
            <li><a id="link1-3" data-desc="Sample Alt Text 1-3" href="/">Link </a>
            </li>
            <li><a id="link1-4" data-desc="Sample Alt Text 1-4" href="/">Link </a>
            </li>
          </ul>
        </div>
        <div class="col-sm-4">
          <ul>
            <li>
              <h3>Link set 1-2</h3>
            </li>
            <li><a id="link1-5" data-desc="Sample Alt Text 1-5" href="/">Link </a>
            </li>
            <li><a id="link1-6" data-desc="Sample Alt Text 1-6" href="/">Link </a>
            </li>
            <li><a id="link1-7" data-desc="Sample Alt Text 1-7" href="/">Link </a>
            </li>
            <li><a id="link1-8" data-desc="Sample Alt Text 1-8" href="/">Link </a>
            </li>
          </ul>
        </div>
        <div class="col-sm-4">
          <div class="description"></div>
        </div>
      </div>
      <div id="div2" class="row">
        <div class="col-sm-4">
          <ul>
            <li>
              <h3>Link set 2-1</h3>
            </li>
            <li><a id="link2-1" data-desc="Sample Alt Text 2-1" href="/">Link </a>
            </li>
            <li><a id="link2-2" data-desc="Sample Alt Text 2-2" href="/">Link </a>
            </li>
            <li><a id="link2-3" data-desc="Sample Alt Text 2-3" href="/">Link </a>
            </li>
            <li><a id="link2-4" data-desc="Sample Alt Text 2-4" href="/">Link </a>
            </li>
          </ul>
        </div>
        <div class="col-sm-4">
          <ul>
            <li>
              <h3>Link set 2-2</h3>
            </li>
            <li><a id="link2-5" data-desc="Sample Alt Text 2-5" href="/">Link </a>
            </li>
            <li><a id="link2-6" data-desc="Sample Alt Text 2-6" href="/">Link </a>
            </li>
            <li><a id="link2-7" data-desc="Sample Alt Text 2-7" href="/">Link </a>
            </li>
            <li><a id="link2-8" data-desc="Sample Alt Text 2-8" href="/">Link </a>
            </li>
          </ul>
        </div>
        <div class="col-sm-4">
          <div class="description"></div>
        </div>
      </div>
    </div>

  </body>
</html>

【讨论】：