Question

我正在试图弄清楚如何制作它，以便当你悬停一个盒子时，元素的span的文本显示在特定的div中。

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

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

$(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函数获取其内容。希望有所帮助。

在span的父进程jQuery之后显示其他元素中的span内容

1 个答案: