如何在懸停功能中設置默認變量？

Question

當我取消移動時，我想獲得我的按鈕的默認文本，但如果我定義我的默認文本按鈕上取消它給我一個操縱的文本，但我想獲得默認文本我該怎麼做？

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

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

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

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

1. 既然你已經在你的OP化妝使用該attr的數據屬性。設置一個數據文本，然後將其設置爲默認值，然後在未懸停設置按鈕

Answer 3

再次SA文本您必須聲明的功能中，你想用它的變量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 4

首先，你不需要這裏的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 5

不要重新定義defaultButtonText變量hover事件處理程序：

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

你可以用純CSS做到這一點：

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

獎金，在點擊文本：

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