如何在悬停功能中设置默认变量？

Question

当我取消切换时，我想要获取我的按钮的默认文本，但是如果我在unhover上定义我的默认文本按钮，它会给我一个操作文本，但我想获取默认文本，我该怎么做？

$('button').each(function(){
    var dataColor = $('this').data('color');
  $(this).css({
    color:dataColor,
  });
  $(this).hover(function(){
    var defaultButtonText = $(this).text();
    $(this).text('SALE');
  },function(){
      $(this).text(defaultButtonText);
  });
})

button{
  width:10%;
  border:1px solid #ccc;
  background:#fff;
  padding:12px;
  margin:5%;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-color="#cc0033">A button</button>
<button data-color="#396786">B button</button>
<button data-color="#CC99FF">C button</button>

Answer 1

您必须在要使用它的函数之外声明变量defaultButtonText：

$('button').each(function(){
    var dataColor = $('this').data('color');
  $(this).css({
    color:dataColor,
  });
  
  var defaultButtonText = $(this).text(); 
  
  $(this).hover(function(){
    $(this).text('SALE');
  },function(){
      $(this).text(defaultButtonText);
  });
})

button{
  width:10%;
  border:1px solid #ccc;
  background:#fff;
  padding:12px;
  margin:5%;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-color="#cc0033">A button</button>
<button data-color="#396786">B button</button>
<button data-color="#CC99FF">C button</button>

Answer 2

＆＃13;

＆＃13;

$('button').each(function(){
    var dataColor = $('this').data('color');
  $(this).css({
    color:dataColor,
  });
  $(this).hover(function(){
    //var defaultButtonText = $(this).text();
    $(this).text('SALE');
  },function(){
      $(this).text($(this).attr("data-text"));
  });
})

＆＃13;

button{
  width:10%;
  border:1px solid #ccc;
  background:#fff;
  padding:12px;
  margin:5%;
  cursor:pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-color="#cc0033" data-text="A button">A button</button>
<button data-color="#396786" data-text="B button">B button</button>
<button data-color="#CC99FF" data-text="C button">C button</button>

＆＃13;

＆＃13;

＆＃13;

1. 由于您的OP中有数据属性，因此请使用该attr。设置数据文本，然后将其设置为默认值，然后在“悬停”中再次将其设置为按钮文本

Answer 3

首先，您不需要each()循环，您可以将这些元素作为一个组进行处理。

其次，要在mouseleave上设置原始文本值，您可以在数据属性中设置它，可以在事件发生时读取。试试这个：

$('button').css('color', function() {
  return $(this).data('color');
}).hover(function() {
  $(this).text($(this).data('hover-text'));
}, function() {
  $(this).text($(this).data('original-text'));
});

button {
  width: 10%;
  border: 1px solid #ccc;
  background: #fff;
  padding: 12px;
  margin: 5%;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-color="#cc0033" data-original-text="A button" data-hover-text="SALE">A button</button>
<button data-color="#396786" data-original-text="B button" data-hover-text="SALE">B button</button>
<button data-color="#CC99FF" data-original-text="C button" data-hover-text="SALE">C button</button>

Answer 4

$('button').each(function(){
    var dataColor = $(this).attr('data-color');
  $(this).css({
    color:dataColor,
  });
  var defaultButtonText = "";
  var newColor =''; 
  $(this).hover(function(){
    defaultButtonText  = $(this).text();
    $(this).text('SALE');
   $(this).css('background-color', $('this').attr('data-color'));
  },function(){
      $(this).text(defaultButtonText);
     $(this).css('background-color', $('this').attr('data-color'));
  });
})

button{
  width:10%;
  border:1px solid #ccc;
  background:#fff;
  padding:12px;
  margin:5%;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-color="#cc0033">A button</button>
<button data-color="#396786">B button</button>
<button data-color="#CC99FF">C button</button>

Answer 5

请勿在{{1​​}}事件处理程序中重新定义defaultButtonText变量：

＆＃13;

＆＃13;

hover

＆＃13;

$('button').each(function() {
  var dataColor = $('this').data('color');
  $(this).css({
    color: dataColor,
  });
  var defaultButtonText=$(this).text();
  $(this).hover(function() {
    $(this).text('SALE');
  }, function() {
    $(this).text(defaultButtonText);
  });
})

＆＃13;

button {
  width: 10%;
  border: 1px solid #ccc;
  background: #fff;
  padding: 12px;
  margin: 5%;
  cursor: pointer;
}

＆＃13;

＆＃13;

＆＃13;

Answer 6

您可以使用纯CSS：

button:before {
    content: "Default Text";
}
button:hover:before {
    content: "Hover Text";
}

奖励，点击文字：

button:active:before {
    content: "Hover Text";
}