如果将鼠标悬停在文字上，请将文字更改为其他内容

时间：2017-08-17 16:44:30

标签： javascript jquery hover

我试图创建一个表，如果你将部分数据悬停在其中，它会将数据值更改为其他值。如果你关闭鼠标，它将恢复它。

问题是，如果它有多个具有正确数据的条目，它将更改每个ID /类名设置的位置，但我希望它只能用于已经悬停的那个。我尝试用$(this)做到这一点，但没有到达任何地方。

＆＃13;
＆＃13; 
$(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');
    }
});
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

试试这个：

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

答案 1 :(得分：1)

您可以在此处使用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>

答案 2 :(得分：0)

将事件对象传递给您的函数。您可以使用e.target确定激活了哪个元素。

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

答案 3 :(得分：0)

你的问题是...... 

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

由于您正在调用一个类，因此它将应用于您的html中具有该名称的所有类。

https://jsfiddle.net/srg0uzqs/

将其更改为.. 

 $(this).html('9999k');
相关问题
最新问题