jquery - 在跨度的父级悬停jQuery之后在其他元素中显示跨度内容

Question

我试图弄清楚如何制作它，以便当您悬停一个框时，元素的跨度文本显示在特定的 div 中。

http://jsfiddle.net/zACX4/

HTML

<ul id="specs">
  <li><a id="img1" href=""><span>ldldld</span></a></li>
  <li><a id="img2" href=""><span>ldldld</span></a></li>
  <li><a id="img3" href=""><span>ldldld</span></a></li>
  <li><a id="img4" href=""><span>ldldld</span></a></li>
  <li><a id="img5" href=""><span>ldldld</span></a></li>
  <li><a id="img6" href=""><span>ldldld</span></a></li>
  <li id="mid"><div id="specs_detail"></div></li>
</ul>

jQuery

$(document).ready(function(){
  $('#specs li a').hover(function(){  

    var toLoad = $(this).find('span');
    $('#specs_detail p').fadeOut('fast',loadContent);
    function loadContent() {
        $('#specs_detail p').load(toLoad,'',showNewContent())
    }  
    function showNewContent() {  
        $('#specs_detail p').fadeIn('fast');
    }  
    return false;
 });  
});

Answer 1

好的，所以你有一些不起作用的东西。我更新了你的小提琴。

$(document).ready(function(){
    $('#specs li a').hover(function(){        
        var toLoad = $(this).find('span').text();

        $('#specs_detail').fadeOut('fast',loadContent);
        function loadContent() {
            $('#specs_detail').html(toLoad);
            showNewContent();
        }  
        function showNewContent() {  
            $('#specs_detail').fadeIn('fast');
        }  
        return false;
    });  
});

要插入 html，请使用该.html函数而不是.load. 此外，#specs_detail不包含任何p元素，因此您无法选择它，只需使用 div 或向其添加p元素。最后，变量 toLoad 包含 span 元素，使用该.text函数获取其内容。希望有帮助。