时间戳

首页 > 解决方案 > 将鼠标悬停在该元素上时，如何将 json 数据分配给段落？

javascript - 将鼠标悬停在该元素上时，如何将 json 数据分配给段落？

问题描述

所以我想为不同的元素分配不同的数据。当我将鼠标悬停在第一个项目上时，我想从第一个 jsonObject 分配数据johnObj，当我将鼠标悬停在下一个 div 上时，我想将数据分配给sarahObj段落。

将来我将添加更多的 div 并分配数据，因此对索引进行硬编码可能不是那么好。

var johnObj = {name: "John", age: 31, city: "New York"};

var sarahObj = {name: "Sarah", age: 40, city: "Oaklahoma City"};
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">
  <p class=radio> assign name here </p>
  <p class=radio> assign age here </p>
  <p class=radio> assign city here </p>
  </span>
</div>

<br>

<div class="tooltip">Hover over me
  <span class="tooltiptext">
  <p class=radio> assign name here </p>
  <p class=radio> assign age here </p>
  <p class=radio> assign city here </p>
  </span>
</div>

标签： javascriptjqueryhtmlcss

解决方案

你不能把 a<p>放在里面，<span>所以我改变了一点你的 HTML。

var johnObj = {name: "John", age: 31, city: "New York"};

var sarahObj = {name: "Sarah", age: 40, city: "Oaklahoma City"};


function asign(elmt,obj){
  let spans = elmt.querySelectorAll(".radio");
  spans[0].innerHTML = obj.name;
  spans[1].innerHTML = obj.age;
  spans[2].innerHTML = obj.city;  
}

let tooltips = document.querySelectorAll(".tooltiptext");

asign(tooltips[0],johnObj);
asign(tooltips[1],sarahObj);
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

span.radio{display:block;}
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <p class="tooltiptext">
  <span class="radio"> assign name here </span>
  <span class="radio"> assign age here </span>
  <span class="radio"> assign city here </span>
  </p>
</div>

<br>

<div class="tooltip">Hover over me
 <p class="tooltiptext">
  <span class="radio"> assign name here </span>
  <span class="radio"> assign age here </span>
  <span class="radio"> assign city here </span>
  </p>
</div>

但是您可以通过删除 HTML 中的所有这些跨度来简化它：

var johnObj = {name: "John", age: 31, city: "New York"};

var sarahObj = {name: "Sarah", age: 40, city: "Oaklahoma City"};


function asign(elmt,obj){
  elmt.innerHTML = `
  <span class="radio">${obj.name}</span>
  <span class="radio">${obj.age}</span>
  <span class="radio">${obj.city}</span>
` 
}

let tooltips = document.querySelectorAll(".tooltiptext");

asign(tooltips[0],johnObj);
asign(tooltips[1],sarahObj);
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

span.radio{display:block;}
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <p class="tooltiptext"></p>
</div>

<br>

<div class="tooltip">Hover over me
  <p class="tooltiptext"></p>
</div>

更新：

OP希望它“以更动态的方式”。在这种情况下，我将数据放入数组中：

var data=[
{name: "John", age: 31, city: "New York"},
{name: "Sarah", age: 40, city: "Oaklahoma City"}
]


function asign(elmt,obj){
  elmt.innerHTML = `
  <span class="radio">${obj.name}</span>
  <span class="radio">${obj.age}</span>
  <span class="radio">${obj.city}</span>
` 
}

let tooltips = Array.from(document.querySelectorAll(".tooltiptext"));

tooltips.forEach((tt,i)=>{
  asign(tt,data[i])
})
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

span.radio{display:block;}
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <p class="tooltiptext"></p>
</div>

<br>

<div class="tooltip">Hover over me
  <p class="tooltiptext"></p>
</div>

推荐阅读