链接alt在悬停时显示在单独的div中

时间：2016-03-16 21:38:13

标签： javascript jquery html5

我是jQuery的新手，所以我很感激您提供的任何帮助/建议！

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

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

enter image description here

我的HTML：

＆＃13;
＆＃13; 
$(function() {
  "use strict";
  $("#description").text(id.desc);
  $("a.description").hover(
    function() {
      $("#description").text($(this).attr("desc"));
    }
  );
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

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

  1. 您不能在文档中使用重复 ID id=description。
  2. a.description和根本没有 <a class="description"。
  3. alt是一个无效的 A元素属性，而且desc对于HTML的属性列表是未知的。

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

    ＆＃13;
    ＆＃13; 
    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") : "");
  });
  
});
    ＆＃13; 
    @import url('http://getbootstrap.com/dist/css/bootstrap.css');
    ＆＃13; 
    <!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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题