javascript - 当元素具有相同的类时如何分配数据?
问题描述
我一直面临一个小问题..这是关于类和 ID
假设我有一个 2 div,其中有 5 个段落,所有段落都代表相同的内容。所以第一段代表时间,第二段代表时间等等。
现在想象一下自己在将鼠标悬停在将显示所有段落的元素上时添加一个工具提示。
如果您想根据悬停的值更改这些值,您将如何将数据分配给该特定类?看到这很糟糕..因为ID是独一无二的
<a href="javascript:void(0)" id="headLeftSlot" class="itemSlot">
<div class="headSlot">
<div class="itemImage" id="headSlot">
</div>
<section>
<span class="tooltiptext">
<h3 id="itemInfoName">Item Name</h3>
<h4>Attack bonuses</h4>
<p id="aStab">Stab: +5</p>
<p id="aSlash">Slash: +5</p>
<p id="aCrush">Crush: +5</p>
<p id="aMagic">Range: +5</p>
<p id="aRange">Range: +5</p>
<h4>Defence bonuses</h4>
<p id="dStab">Stab: +5</p>
<p id="dSlash">Stab: +5</p>
<p id="dCrush">Stab: +5</p>
</span>
</section>
</div>
</a>
<div class="topItems">
<a href="javascript:void(0)" id="capeLeftSlot" class="itemSlot">
<section class="capeSlot">
<div class="itemImage" id="capeSlot">
</div>
<span class="tooltiptext">
<h3 id="itemInfoName">Item Name</h3>
<h4>Attack bonuses</h4>
<p id="aStab">Stab: +5</p>
<p id="aSlash">Slash: +5</p>
<p id="aCrush">Crush: +5</p>
<p id="aMagic">Range: +5</p>
<p id="aRange">Range: +5</p>
<h4>Defence bonuses</h4>
<p id="dStab">Stab: +5</p>
<p id="dSlash">Stab: +5</p>
<p id="dCrush">Stab: +5</p>
</span>
</section>
</a>
但是,如果我为它们分配类而不是 ID,我将如何在悬停时更改第二个 div 内容?
因为现在我正在这样做,这很糟糕。
$('.itemImage').mouseover(function(event){
if(model != null){
document.getElementById("itemInfoName").style.color = "Orange";
document.getElementById("itemInfoName").innerHTML = model.Name;
document.getElementById("aStab").innerHTML = "Stab: " + model.AStab;
document.getElementById("aSlash").innerHTML = "Slash: " + model.ASlash;
document.getElementById("aCrush").innerHTML = "Crush: " + model.ACrush;
document.getElementById("aMagic").innerHTML = "Magic: " + model.AMagic;
document.getElementById("aRange").innerHTML = "Range: " + model.ARange;
document.getElementById("dStab").innerHTML = "Stab: " + model.DStab;
document.getElementById("dSlash").innerHTML = "Slash: " + model.DSlash;
document.getElementById("dCrush").innerHTML = "Crush: " + model.DCrush;
document.getElementById("dMagic").innerHTML = "Magic: " + model.DMagic;
document.getElementById("dRange").innerHTML = "Range: " + model.DRange;
document.getElementById("mStrength").innerHTML = "Melee Strength: " + model.MeleeStrength;
document.getElementById("rStrength").innerHTML = "Ranged Strength: " + model.RangedStrength;
document.getElementById("mDamage").innerHTML = "Magic Damage: " + model.MagicDamage;
document.getElementById("Prayer").innerHTML = "Prayer: " + model.Prayer;
}
});
解决方案
您可以通过不同的数据属性来识别 div。例如,您有两个具有相同类“工具提示文本”的元素
<span class="tooltiptext">
你可以添加一些数据属性来区分它
<span class="tooltiptext" data-some-id="1">
然后您可以通过执行以下操作来选择它:
$(".tooltiptext[data-some-id='1']")
<a href="javascript:void(0)" id="headLeftSlot" class="itemSlot">
<div class="headSlot">
<div class="itemImage" id="headSlot">
</div>
<section>
<span class="tooltiptext">
<h3 id="itemInfoName">Item Name</h3>
<h4>Attack bonuses</h4>
<p id="aStab">Stab: +5</p>
<p id="aSlash">Slash: +5</p>
<p id="aCrush">Crush: +5</p>
<p id="aMagic">Range: +5</p>
<p id="aRange">Range: +5</p>
<h4>Defence bonuses</h4>
<p id="dStab">Stab: +5</p>
<p id="dSlash">Stab: +5</p>
<p id="dCrush">Stab: +5</p>
</span>
</section>
</div>
</a>
<div class="topItems">
<a href="javascript:void(0)" id="capeLeftSlot" class="itemSlot">
<section class="capeSlot">
<div class="itemImage" id="capeSlot">
</div>
<span class="tooltiptext">
<h3 id="itemInfoName">Item Name</h3>
<h4>Attack bonuses</h4>
<p id="aStab">Stab: +5</p>
<p id="aSlash">Slash: +5</p>
<p id="aCrush">Crush: +5</p>
<p id="aMagic">Range: +5</p>
<p id="aRange">Range: +5</p>
<h4>Defence bonuses</h4>
<p id="dStab">Stab: +5</p>
<p id="dSlash">Stab: +5</p>
<p id="dCrush">Stab: +5</p>
</span>
</section>
</a>
$(".tooltiptext").on("mouseover", function(e){
var el = $(e.currentTarget);
$("#tip").html(el.data("tip"));
});
$(".tooltiptext").on("mouseout", function(e){
var el = $(e.currentTarget);
$("#tip").html("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tip"></div>
<a href="javascript:void(0)" id="headLeftSlot" class="itemSlot">
<div class="headSlot">
<div class="itemImage" id="headSlot">
</div>
<section>
<span class="tooltiptext" data-tip="my content1">
<h3 id="itemInfoName">Item Name</h3>
<h4>Attack bonuses</h4>
<p id="aStab">Stab: +5</p>
<p id="aSlash">Slash: +5</p>
<p id="aCrush">Crush: +5</p>
<p id="aMagic">Range: +5</p>
<p id="aRange">Range: +5</p>
<h4>Defence bonuses</h4>
<p id="dStab">Stab: +5</p>
<p id="dSlash">Stab: +5</p>
<p id="dCrush">Stab: +5</p>
</span>
</section>
</div>
</a>
<div class="topItems">
<a href="javascript:void(0)" id="capeLeftSlot" class="itemSlot">
<section class="capeSlot">
<div class="itemImage" id="capeSlot">
</div>
<span class="tooltiptext" data-tip="my content2">
<h3 id="itemInfoName">Item Name</h3>
<h4>Attack bonuses</h4>
<p id="aStab">Stab: +5</p>
<p id="aSlash">Slash: +5</p>
<p id="aCrush">Crush: +5</p>
<p id="aMagic">Range: +5</p>
<p id="aRange">Range: +5</p>
<h4>Defence bonuses</h4>
<p id="dStab">Stab: +5</p>
<p id="dSlash">Stab: +5</p>
<p id="dCrush">Stab: +5</p>
</span>
</section>
</a>
推荐阅读
- javascript - javascript - 删除包含特定文本的段落
- react-native - React Native Picker 确认按钮
- android - 线程循环崩溃
- ios - 从应用程序控制网络链接调节器
- html - 我有 3 个 CSS 按钮,但另一个有
- debugging - MSVC 显示“没有可用的反汇编”。对于任何从 MSVC 编译出来的东西
- javascript - 如何停止在 hubspot 上提交表单?
- yocto - Yocto do_install(): 安装实用手册
- vba - VBA Word 输入嵌套单元格
- java - 响应消息:javax.mail.MessageRemovedException:无法在 POP3Message.getContentStream 中检索消息 #1