结合点击和悬停功能 - JQuery答案

【问题标题】：Combine click and hover functions - JQuery结合点击和悬停功能 - JQuery
【发布时间】：2016-06-16 04:12:48
【问题描述】：

我的目标是（在按钮上）当您悬停时会显示不同的文本，而当悬停时文本会恢复。然后单击文本更改为其他内容。

我拥有的每个功能都可以单独使用，没有其他功能，但是当背靠背放置时，只有悬停功能才会起作用。我非常有信心，这是因为点击在悬停时被隐藏/覆盖，导致它不会触发。对于我的生活，我无法弄清楚如何将它组合成一个功能。替换按钮范围内的文本。

这是我目前所拥有的：

悬停功能也恢复到以前的文本-

$(function(){
    var prev;    
    $('#p1Button').hover(function(){
        prev = $(this).text();
        $(this).text("Clicky Clicky!");
    }, function(){
        $(this).text(prev)
    });
});

点击功能：

$("#p1Button").click(function(){
    $('#buttontext').replaceWith("Clicked!");
});

文本更改的html按钮：

<button id=p1Button><span id="buttontext"> please select me!</span></button>

【问题讨论】：

标签： jquery html hover click

【解决方案1】：

我认为您正在用文本替换 span 按钮文本，因此 onclick 它不适用于 replace。所以这是正确的代码。

$('#p1Button').hover(function(){
  prev = $(this).text();
  $(this).find('#buttontext').text("Clicky Clicky!");
}, function(){
  $(this).find('#buttontext').text(prev)
});

JSfiddle - https://jsfiddle.net/dhananjaymane11/apLqa5k5/

【讨论】：

编辑了问题以使其更清楚，但是是的，这正是我想要的。非常感谢，就像一个魅力！

【解决方案2】：

$(this).text() 只会更改按钮文本。所以找到#buttontext 文本。我看到你的点击功能在点击后将不起作用！因为你使用了replaceWith，这将删除你的整个元素所以@ 987654323@将删除！！！

$('#p1Button').hover(function(){
  prev = $(this).find('#buttontext').text();
  $(this).find('#buttontext').text("Clicky Clicky!");
}, function(){
  $(this).find('#buttontext').text(prev)
});
$("#p1Button").click(function(){
$('#buttontext').text("Clicked!"); //replaceWith is not working here ,it remove all element
});

【讨论】：