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

Question

所以我想为不同的元素分配不同的数据。 当我将鼠标悬停在第一个元素上时，我想从第一个 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>

Answer 1

你不能放 <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>