jQuery

Question

我基本上只是想根据使用 jQuery 滚动的按钮用文本填充 div。我不太确定哪里出错了。

        $(".buttonSet").hover(function(){
        if $("#button_X".hover){
            $('.textPreview').show();
            document.getElementById("preview").innerHTML = 'TEST X';
        } if else $("#button_Y".hover) {
            $('.textPreview').show();
            document.getElementById("preview").innerHTML = 'TEST Y';
        } if else $("#button_Z".hover) {
            $('.textPreview').show();
            document.getElementById("preview").innerHTML = 'TEST Z';
        }
    },function(){
        $('.textPreview').hide();
    });

Answer 1

为什么不为每个按钮使用单独的悬停事件？它将简化您的代码并可能解决您的问题：

$("#button_X").hover(function(){
    $('.textPreview').show();
    document.getElementById("preview").innerHTML = 'TEST X';
});

$("#button_Y").hover(function(){
    $('.textPreview').show();
    document.getElementById("preview").innerHTML = 'TEST Y';
});

$("#button_Z").hover(function(){
    $('.textPreview').show();
    document.getElementById("preview").innerHTML = 'TEST Z';
});

Answer 2

您可以尝试更简单、更易于维护的方法... 在您的每个按钮中，将功能分配给 show/hide 您的 div 分配给 onmouseover 和 onmouseleave 事件。您可以将不同的消息作为参数传递给函数。

function ShowOutput(message){
   $('#output').show().text(message + ' was button hovered');
}

您的 HTML 看起来像：

<div id="buttonX" class="button" onmouseover="ShowOutput('X')" onmouseleave="$('#output').hide()">X</div>
<div id="buttonY" class="button" onmouseover="ShowOutput('Y')" onmouseleave="$('#output').hide()">Y</div>
<div id="buttonZ" class="button" onmouseover="ShowOutput('Z')" onmouseleave="$('#output').hide()">Z</div>
<div id="output"></div>

看看我为您创建的这个 Plunker： http://plnkr.co/edit/sli9hQIF0glc3Nvaxkwu?p=info

P.S 如果您想使用 jQuery 代码，请确保将 jQuery 添加到您的 html 页面。

jQuery - 在唯一按钮悬停时隐藏和显示 <div>

jQuery - Hide and Show <div> on Unique Button Hover

jquery-hover