javascript - 如何在点击时为另一个选择器切换悬停事件？

Question

Please take a look at this fiddle

谁能告诉我如何在单击 #edit_mode 按钮时为表格单元格启用悬停事件并在再次单击时禁用它？

<button id='enable_mode'>Enable</button>

<table>
  <tbody>
   <tr><td>Package</td><td>1</td></tr>
   <tr><td>Cost</td><td>900</td></tr>
 </tbody>
</table>

jQuery:

$('#enable_mode').click(function(){
   $(this).text(function(i, text){
          return text === "Enable" ? "Enable" : "Disable";
   })
   var see = $(this).text()
   if($(this).text() == "Enable"){
     hoverme($('table tbody tr td:nth-child(2)'));
   }else{
      ????
   }
});

function hoverme(para) {
$(para).hover(
   function() {
     $(this ).append('<div id="edit">Edit</div>' );
    }, function() {
     $( this ).find('#edit').remove();
   }
  );
}

Answer 1

这可能是您想要实现的目标: JSFiddle
这是相应的代码。 HTML 和 CSS 代码保持不变，为了清晰起见，我只是添加了更多行，以及一些填充和边距。

JS:

$('#enable_mode').click(function () {
    //Check the text of the button
    $(this).text(function (i, text) {
        if (text === "Enable") {
            //Enable hover state with events on mouseenter and mouseleaves 
            $("tr").hover(function () {
                //On mouseenter, change background color (= hover state)
                $(this).css("background-color", "#DDD");
            }, function () {
                //On mouseleave, change background color to default
                $(this).css("background-color", "white");
            });
        } else if (text === "Disable") {
            //Remove mouseenter and mouseleave events.
            $("tr").unbind('mouseenter mouseleave');
        }

        //Toggle the text in the button
        return text === "Enable" ? "Disable" : "Enable";
    });
});

您可以修改此代码以在悬停时执行几乎任何操作，包括附加内容(就像您想要执行的那样)。