Fatal编程技术网
  • javascript/
  • Javascript 如何在变量中连接文本和图像

Javascript 如何在变量中连接文本和图像

javascript

Javascript 如何在变量中连接文本和图像,javascript,Javascript,您好，首先我是java脚本的基础，我有一个在div上的鼠标，每个div 包含沿图像的信息。问题是我想把文本和图像结合起来 在一个变量中，每当我将鼠标悬停在每个div上时，都会显示图像上的信息 应该像我为他们每个人做的那样改变 问题在于如何在变量中组合文本和图像 但我不知道怎么做这是代码： <script type="text/javascript"> function ENGshowElements(){ var Engineering = "Your

您好，首先我是java脚本的基础，我有一个在div上的鼠标，每个div

包含沿图像的信息。问题是我想把文本和图像结合起来

在一个变量中，每当我将鼠标悬停在每个div上时，都会显示图像上的信息

应该像我为他们每个人做的那样改变

问题在于如何在变量中组合文本和图像

但我不知道怎么做这是代码：

    <script type="text/javascript">
    function ENGshowElements(){
        var Engineering = "Your In Engineering Section <br> <img src='a.jpg'>";

       document.getElementById("contents").innerHTML = Engineering;
    }
        function CONshowElements(){
        var Construction = "Your In Construction Section";

       document.getElementById("contents").innerHTML = Construction;
    }
        function LLCshowElements(){
        var LLCDubia = "Your In LLC Dubia Section";

       document.getElementById("contents").innerHTML = LLCDubia;
    }
        function WASshowElements(){
        var WasteManagement = "Your In Waste Management Section";

       document.getElementById("contents").innerHTML = WasteManagement;
    }
       function TRAshowElements(){
        var Transportation = "Your In Transportation Section";

       document.getElementById("contents").innerHTML = Transportation;
    }
           function LOGshowElements(){
        var Logistics = "Your In Logistics Section";

       document.getElementById("contents").innerHTML = Logistics;
    }
</script>




  <div class="firstbox" id="Engineering" onmouseover="ENGshowElements(); return false; " >Engineering</div>
  <div class="secbox" id="Construction"  onmouseover="CONshowElements(); return false; ">Construction</div>
  <div class="thirdbox" id="LLCDubia"  onmouseover="LLCshowElements(); return false; " >LLC Dubia</div>
  <div class="fourthbox" id="WasteManagement"  onmouseover="WASshowElements(); return false; " >Waste Management</div>
  <div class="fivthbox" id="Transportation"  onmouseover="TRAshowElements(); return false; " >Transportations</div>
  <div class="sixthbox" id="Logistics"  onmouseover="LOGshowElements(); return false; " >Logistics</div>


函数ENGshowElements（）{
var Engineering=“您所在的工程部门
”；
document.getElementById（“contents”）.innerHTML=Engineering；
}
函数CONshowElements（）{
var Construction=“您所在的施工区”；
document.getElementById（“contents”）.innerHTML=Construction；
}
函数LLCshowElements（）{
var LLCDubia=“您在Dubia区的有限责任公司”；
document.getElementById（“contents”）.innerHTML=LLCDubia；
}
函数WASshowElements（）{
var WasteManagement=“您在废物管理部分”；
document.getElementById（“contents”）.innerHTML=废物管理；
}
函数TRAshowElements（）{
var Transportation=“您所在的运输部门”；
document.getElementById（“contents”）.innerHTML=传输；
}
函数LOGshowElements（）{
var Logistics=“您所在的物流部门”；
document.getElementById（“contents”）.innerHTML=Logistics；
}
工程类
建设
杜比亚有限责任公司
废物管理
运输
后勤
=>jsfiddle

为了把事情弄清楚，并指出你可能走错了方向，这里有一个更好的选择。这可能主要是使用css完成的，但这里有一些更容易维护的东西

我们将在每个按钮上只使用一次单击功能，而不是使用多个触发器。每个按钮都有一个“数据目标”，它是另一个元素的id

我们的标记将如下所示：

<html>
 <head>
  <style>
    #source { display: none; }
  </style>
  <script>
   // Our click event
   function clickEvent (ev) {
     // Get the target in the dom
     // While checking more about event should be good because 
     // Target may not be the element you're looking for in some cases.
     var target = ev.target.dataset['target'];
     var obj = document.getElementById(target);

     // change the content with the one found
     document.getElementById('content').innerHTML = obj.innerHTML;
   }

   function loaded() {
     var docs = document.getElementsByClassName("btn");
     // Transform to array 
     docs = Array.prototype.slice.call(docs);
     docs.forEach(function(elem) {
       // Assign click event to all elements
       elem.onclick = clickEvent;
     });
   }
  </script>
 </head>
 <body onload="loaded()">
  <div>
    <button class="btn" data-target="Engineering-Source">Engineering</button>
    ...
  </div>
  <div id="content"></div>
  <div id="source">
    <div id="Engineering-Source">
      Your In Engineering Section <br> <img src='a.jpg'>
    </div>
    ...more after
  </div>
 </body>
</html>


#源{显示：无；}
//我们的点击活动
功能点击事件（ev）{
//在dom中获取目标
//而检查更多关于事件的信息应该是好的，因为
//在某些情况下，目标可能不是您要查找的元素。
var target=ev.target.dataset['target']；
var obj=document.getElementById（目标）；
//用找到的内容更改内容
document.getElementById（'content'）.innerHTML=obj.innerHTML；
}
函数加载（）{
var docs=document.getElementsByClassName（“btn”）；
//转换为数组
docs=Array.prototype.slice.call（docs）；
docs.forEach（功能（要素）{
//将单击事件指定给所有图元
elem.onclick=单击事件；
});
}
工程类
...
您在工程部门的职位

……以后会有更多
我添加了评论，但这是一个很好的方法。避免“vanillajs”可能不是一件坏事，但是。在vanillajs中，这样做不需要太多的痛苦

也就是说，这里有一些理由说明为什么它是好的。内容保留在html中，而不是javascript中。如果一个网络蜘蛛会下载你的页面，那么它在javascript源代码中查找html内容而不是文本的可能性就大得多

在我的示例中，一些东西可能不存在于旧浏览器中，如“dataset”和“forEach”

注 也就是说，一种纯粹的“css”方式是可能的，但可能会使文档的结构更难编辑。另一方面，有多种方法可以混合使用css和js来保持最少的js，并尽可能多地使用html/css来保持样式一致

无论如何，我上面的例子应该在一些浏览器中工作，给出一个方法。如果您还不熟悉Javascript，我建议您使用jQuery或prototype之类的库。上面的代码不一定会出现在产品中

演示：

HTML:

<div class="firstbox" id="Engineering">Engineering</div>
<div class="secbox" id="Construction">Construction</div>
<div class="thirdbox" id="LLCDubia">LLC Dubia</div>
<div class="fourthbox" id="WasteManagement">Waste Management</div>
<div class="fivthbox" id="Transportation">Transportations</div>
<div class="sixthbox" id="Logistics">Logistics</div>
<div id="contents"></div>

document.getElementById('Engineering').onmouseover = ENGshowElements;
document.getElementById('Construction').onmouseover = CONshowElements;
document.getElementById('LLCDubia').onmouseover = LLCshowElements;
document.getElementById('WasteManagement').onmouseover = WASshowElements;
document.getElementById('Transportation').onmouseover = TRAshowElements;
document.getElementById('Logistics').onmouseover = LOGshowElements;

function ENGshowElements() {
    var Engineering = "Your In Engineering Section <br> <img src='a.jpg'>";
    document.getElementById("contents").innerHTML = Engineering;
}

function CONshowElements() {
    var Construction = "Your In Construction Section";

    document.getElementById("contents").innerHTML = Construction;
}

function LLCshowElements() {
    var LLCDubia = "Your In LLC Dubia Section";

    document.getElementById("contents").innerHTML = LLCDubia;
}

function WASshowElements() {
    var WasteManagement = "Your In Waste Management Section";

    document.getElementById("contents").innerHTML = WasteManagement;
}

function TRAshowElements() {
    var Transportation = "Your In Transportation Section";

    document.getElementById("contents").innerHTML = Transportation;
}

function LOGshowElements() {
    var Logistics = "Your In Logistics Section";

    document.getElementById("contents").innerHTML = Logistics;
}

工程
建设
杜比亚有限责任公司
废物管理
运输
后勤
JS:

<div class="firstbox" id="Engineering">Engineering</div>
<div class="secbox" id="Construction">Construction</div>
<div class="thirdbox" id="LLCDubia">LLC Dubia</div>
<div class="fourthbox" id="WasteManagement">Waste Management</div>
<div class="fivthbox" id="Transportation">Transportations</div>
<div class="sixthbox" id="Logistics">Logistics</div>
<div id="contents"></div>

document.getElementById('Engineering').onmouseover = ENGshowElements;
document.getElementById('Construction').onmouseover = CONshowElements;
document.getElementById('LLCDubia').onmouseover = LLCshowElements;
document.getElementById('WasteManagement').onmouseover = WASshowElements;
document.getElementById('Transportation').onmouseover = TRAshowElements;
document.getElementById('Logistics').onmouseover = LOGshowElements;

function ENGshowElements() {
    var Engineering = "Your In Engineering Section <br> <img src='a.jpg'>";
    document.getElementById("contents").innerHTML = Engineering;
}

function CONshowElements() {
    var Construction = "Your In Construction Section";

    document.getElementById("contents").innerHTML = Construction;
}

function LLCshowElements() {
    var LLCDubia = "Your In LLC Dubia Section";

    document.getElementById("contents").innerHTML = LLCDubia;
}

function WASshowElements() {
    var WasteManagement = "Your In Waste Management Section";

    document.getElementById("contents").innerHTML = WasteManagement;
}

function TRAshowElements() {
    var Transportation = "Your In Transportation Section";

    document.getElementById("contents").innerHTML = Transportation;
}

function LOGshowElements() {
    var Logistics = "Your In Logistics Section";

    document.getElementById("contents").innerHTML = Logistics;
}

document.getElementById（'Engineering'）.onmouseover=ENGshowElements；
document.getElementById（'Construction'）.onmouseover=CONshowElements；
document.getElementById（'LLCDubia'）。onmouseover=LLCshowElements；
document.getElementById（'WasteManagement'）.onmouseover=WASshowElements；
document.getElementById（'Transportation'）.onmouseover=TRAshowElements；
document.getElementById（'Logistics'）.onmouseover=LOGshowElements；
函数ENGshowElements（）{
var Engineering=“您所在的工程部门
”；
document.getElementById（“contents”）.innerHTML=Engineering；
}
函数CONshowElements（）{
var Construction=“您所在的施工区”；
document.getElementById（“contents”）.innerHTML=Construction；
}
函数LLCshowElements（）{
var LLCDubia=“您在Dubia区的有限责任公司”；
document.getElementById（“contents”）.innerHTML=LLCDubia；
}
函数WASshowElements（）{
var WasteManagement=“您在废物管理部分”；
document.getElementById（“contents”）.innerHTML=废物管理；
}
函数TRAshowElements（）{
var Transportation=“您所在的运输部门”；
document.getElementById（“contents”）.innerHTML=传输；
}
函数LOGshowElements（）{
var Logistics=“您所在的物流部门”；
document.getElementById（“contents”）.innerHTML=Logistics；
}
看在上帝的份上，使用css！您可以使用图片等将所有内容添加到页面中，使用javascript切换类以显示/隐藏某些元素。你的意思是“你是”/“你是”而不是“你的”。