如果將鼠標懸停在文本上，則將文本更改為其他內容

Question

我正在嘗試創建一個表，如果你將部分數據懸停在其中，它會將數據值更改為其他值。 如果你把鼠標移開它會恢復它。

問題是，如果它有多個具有正確數據的條目，它將更改每個ID /類名設置的位置，但我希望它只能用於已經懸停的那個。 我嘗試用$(this)來做，但沒有得到任何地方。

 $(document).ready(function() { $('.wep-data').on({ mouseenter: function() { document.getElementById("1").style.display = "none"; document.getElementById("3").style.display = "none"; document.getElementById("2").colSpan = "3"; $('.wep-data').html('9999k'); $('.wep-data').first().html(''); $('.wep-data').last().html(''); $('.wep-data').css('border-right', '2px solid #ccc'); $('.wep-data').css('border-left', '2px solid #ccc'); }, mouseleave: function() { document.getElementById("1").style.display = "table-cell"; document.getElementById("3").style.display = "table-cell"; document.getElementById("2").colSpan = "1"; $('.wep-data').html('0'); $('.wep-data').first().html('0'); $('.wep-data').last().html('0'); $('.wep-data').css('border-right', '2px solid #ccc'); $('.wep-data').css('border-left', '2px solid #ccc'); } }); }); 

 .weapon-type-selection{ text-shadow: 1px 1px 1px #881812, 1px -1px 1px #881812, -1px 1px 1px #881812, -1px -1px 1px #881812; cursor: pointer; color: white; font-size: 18px; margin-top: 14px; margin-bottom: 10px; } table, th, td { margin: 5px; font-size: 18px; } th{ border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; } td{ border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } .weapons{ height: 670px; } .wep-name{ width: 295px; } .wep-data{ width: 40px; text-align: center; padding: 5px; } .wep-cond{ text-align: center; } .weapon-list{ margin: 10px; color: #2b2825; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="borderBox weapons"> <div class="weapon-list"> <table> <tr> <th>Name</th> <th colspan="3" class="wep-cond">Brand New</th> <th colspan="3" class="wep-cond">New</th> <th colspan="3" class="wep-cond">Poor</th> <th colspan="3" class="wep-cond">Low-Quality</th> <th colspan="3" class="wep-cond">Rotten</th> </tr> <tr> <td class="wep-name">Sword</td> <td id="1" class="wep-data">0</td> <td id="2" class="wep-data">0</td> <td id="3" class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> </tr> <tr> <td class="wep-name">Bow</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> </tr> <tr> <td class="wep-name">Knife</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> </tr> </table> </div> </div> </div> 

Answer 1

嘗試這個：

 $(document).ready(function() { var getElementBlock = function(el) { var $el = $(el), $allTds = $el.parent().find("td:not(:first)"), index = $el.index(); c1 = (index - 1), c2 = Math.floor(c1 / 3) * 3, $els = $allTds.slice(c2, (c2 + 3)); return $els; }; $('.wep-data').on({ mouseenter: function() { var $els = getElementBlock(this); $els.filter(":not(:eq(0))").hide(); $els.filter(":eq(0)").attr("colspan", 3); $('.wep-data-fn').html('9999k'); $('.wep-data-fn').first().html(''); $('.wep-data-fn').last().html(''); $('.wep-data-fn').css('border-right', '2px solid #ccc'); $('.wep-data-fn').css('border-left', '2px solid #ccc'); }, mouseleave: function() { var $els = getElementBlock(this); $els.filter(":not(:eq(0))").show(); $els.filter(":eq(0)").removeAttr("colspan"); $('.wep-data-fn').html('0'); $('.wep-data-fn').first().html('0'); $('.wep-data-fn').last().html('0'); $('.wep-data-fn').css('border-right', '2px solid #ccc'); $('.wep-data-fn').css('border-left', '2px solid #ccc'); } }); }); 

 .weapon-type-selection{ text-shadow: 1px 1px 1px #881812, 1px -1px 1px #881812, -1px 1px 1px #881812, -1px -1px 1px #881812; cursor: pointer; color: white; font-size: 18px; margin-top: 14px; margin-bottom: 10px; } table, th, td { margin: 5px; font-size: 18px; } th{ border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; } td{ border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } .weapons{ height: 670px; } .wep-name{ width: 295px; } .wep-data{ width: 40px; text-align: center; padding: 5px; } .wep-cond{ text-align: center; } .weapon-list{ margin: 10px; color: #2b2825; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="borderBox weapons"> <div class="weapon-list"> <table> <tr> <th>Name</th> <th colspan="3" class="wep-cond">Brand New</th> <th colspan="3" class="wep-cond">New</th> <th colspan="3" class="wep-cond">Poor</th> <th colspan="3" class="wep-cond">Low-Quality</th> <th colspan="3" class="wep-cond">Rotten</th> </tr> <tr> <td class="wep-name">Sword</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> </tr> <tr> <td class="wep-name">Bow</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> </tr> <tr> <td class="wep-name">Knife</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> </tr> </table> </div> </div> </div> 

Answer 2

你可以在這里使用this並將以前的值存儲在一個全局變量中，該變量可以用來恢復mouseleave上的原始值，如下所示：

 $(document).ready(function() { var prevValue; $('.wep-data').on({ mouseenter: function() { prevValue = $(this).html(); $(this).html('9999k'); //$(this).attr('colSpan', 3); $(this).css('border-right', '2px solid #ccc'); $(this).css('border-left', '2px solid #ccc'); }, mouseleave: function() { $(this).html(prevValue); //$(this).attr('colSpan', 1); $(this).css('border-right', '2px solid #ccc'); $(this).css('border-left', '2px solid #ccc'); } }); }); 

 .weapon-type-selection{ text-shadow: 1px 1px 1px #881812, 1px -1px 1px #881812, -1px 1px 1px #881812, -1px -1px 1px #881812; cursor: pointer; color: white; font-size: 18px; margin-top: 14px; margin-bottom: 10px; } table, th, td { margin: 5px; font-size: 18px; } th{ border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; } td{ border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } .weapons{ height: 670px; } .wep-name{ width: 295px; } .wep-data{ width: 40px; text-align: center; padding: 5px; } .wep-cond{ text-align: center; } .weapon-list{ margin: 10px; color: #2b2825; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="borderBox weapons"> <div class="weapon-list"> <table> <tr> <th>Name</th> <th colspan="3" class="wep-cond">Brand New</th> <th colspan="3" class="wep-cond">New</th> <th colspan="3" class="wep-cond">Poor</th> <th colspan="3" class="wep-cond">Low-Quality</th> <th colspan="3" class="wep-cond">Rotten</th> </tr> <tr> <td class="wep-name">Sword</td> <td id="1" class="wep-data">0</td> <td id="2" class="wep-data">0</td> <td id="3" class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> </tr> <tr> <td class="wep-name">Bow</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> </tr> <tr> <td class="wep-name">Knife</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> <td class="wep-data">0</td> </tr> </table> </div> </div> </div> 

Answer 3

將事件對象傳遞給您的函數。 您可以使用e.target確定激活了哪個元素。

mouseenter: function(e) {
  e.target.style.display = 'none';
}

Answer 4

你的問題是這個......

 $('.wep-data').html('9999k');

由於您正在調用一個類，因此它將應用於您的html中具有該名稱的所有類。

https://jsfiddle.net/srg0uzqs/

將其更改為..

 $(this).html('9999k');