Question

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

我的每个功能都是单独工作而没有另一个功能，但是当背靠背时，只有悬停功能可以工作。我非常有信心，因为徘徊时咔哒声被隐藏/覆盖，导致咔嗒声无法发射。对于我的生活，我无法弄清楚如何将它组合成一个功能。替换按钮内跨度内的文本。

这是我到目前为止所做的：

悬停功能也会恢复到之前的文字 -

$(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>

Answer 1

我认为您正在用文本替换span buttontext，因此点击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/

Answer 2

$（this）.text（）只会更改按钮文字。所以找到#buttontext文字。我看到你的点击功能在点击后不起作用！因为你使用replaceWith会删除你的整个元素，span将删除!!!

$('#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
});

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

2 个答案: