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

你可以尝试更简单，更容易维护的东西...... 在每个按钮中分配功能，以显示/隐藏您的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 - 在Unique Button Hover上隐藏和显示<div>

2 个答案: