代码之家 › 专栏 › 技术社区 › Mark Denom

当鼠标悬停在某个段落上时,如何将json数据分配给该段落?

css html jquery javascript

Mark Denom · 技术社区 · 7 年前

当我将鼠标悬停在第一个项目上时,我想从第一个jsonObject分配数据 johnObj 当我将鼠标悬停在下一个div上时,我想从中分配数据 sarahObj 到段落。

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>

1 回复 | 直到 7 年前

Community Mohan Dere 6 年前

你不能把 <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);

。工具提示{
位置:相对位置;
边框底部:1像素点黑色;
}

.tooltip.tooltiptext工具提示{
可见性:隐藏;
背景色:黑色;
颜色:#fff;
边界半径:6px;
填料:5px 0;

/*放置工具提示*/
位置:绝对;
}

可见性:可见;
}

<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])
})

显示:内联块;
边框底部:1像素点黑色;
}

.tooltip.tooltiptext工具提示{
可见性:隐藏;
宽度:120px;
背景色:黑色;
文本对齐:居中;
边界半径:6px;
填料:5px 0;

位置:绝对;
z指数:1;

.tooltip:hover .tooltiptext {

span.收音机{display:block;}

<p>将鼠标移到下面的文本上:</p>

<div class=“tooltip”>在我上方盘旋
<p class=“tooltiptext”></p>

<br>

<div class=“tooltip”>在我上方盘旋
<p class=“tooltiptext”></p>
</部门>