当元素具有相同的类时，如何分配数据？

时间：2018-10-15 07:37:13

标签： javascript html css

我一直面临一个小问题。这是关于类和ID

假设我有一个2格，其中有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;

    }

});

2 个答案:

答案 0 :(得分：-1)

您可以通过不同的数据属性来识别div。例如，您有两个元素具有相同的类'tooltiptext'

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

答案 1 :(得分：-1)

将工具提示跨度放入每个段落中，并通过p＃myId> span {display：none;来访问各个span元素，从而设置css display属性。 }， p＃myId：hover> span {display：inline}。我承认我还没有尝试过，但是它认为这应该可行。对于Javascript部分，您不需要鼠标悬停功能，只需设置元素即可，可以节省一些代码行，也可以只编写html。

相关问题
最新问题