Question

我有一种情况，我正在尝试做，我需要你的帮助，因为我没有太多的JavaScript经验。

首先请看一下我通过ajax的代码，从xml文件解析为html。我将图片设置为#clickMapFlashContainer的背景，并将热点可点击的圈子预先添加到#clickAreas中，结果得到5个可点击的圈子，如下所示:(截图）http://prntscr.com/d3v97y（目前我们到达网站时，网站看起来像这样）

你会注意到我有5个不同的可点击圈子，带有_clickable id和class circle。带有_clickable id的每个圆圈都有onclick =“onclick（id）”，这个函数应该在onclick上执行。

下面我有相同id但没有_clickable的div，所有5都有display：none ...当点击带有_clickable circle的相应id时，显示无需更改为显示块。

然而，有一点我必须提到，在类clickMapItem文本的div是显示块的情况下，来自#clickMapFlashContainer的背景图像应该是可见的，只需要更改图像下方的文本，但在类型为clickMapItem multiImageText的div是显示块的情况下，来自#clickMapFlashContainer 的背景图像应该显示无，因为clickMapItem multiImageText包含一个库，不应该看到背景。

<algorithm>

std::vector

我找到了一个解决方案并且工作正常，但是这是JavaScript新手代码，你可以看到，请看看并建议可以更改的内容，因为我认为这是一个混乱的代码。是否最好使用Array.prototype.slice.call将NodeList转换为数组，然后检查div是否包含其中一个类？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickMap">

<div id="clickMapFlashContainer" style="background-image: url(../../../../../../linkableblob/internet_en/9492/image/steel_agg_bof_flash_en-image.jpg;); width: 560px; height: 560px; background-repeat: no-repeat;">

<div id="clickAreas">
  <div id="clickMap_item_11024_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 11px; left: 219px; width: 76px; height: 76px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
  
  <div id="clickMap_item_11006_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 388px; left: 
 250px; width: 66px; height: 66px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
  
  <div id="clickMap_item_11004_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 155px; left: 
 189px; width: 135px; height: 135px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
  
  <div id="clickMap_item_10450_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 208px; left: 
 436px; width: 105px; height: 105px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
  
  <div id="clickMap_item_9510_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 469px; left: 
 350px; width: 75px; height: 75px; opacity: 0.5; border-radius: 100%; cursor: pointer;">
  </div>
  
<div id="clickMap_item_default" class="clickMapItem text">
     <p>Due to long-standing contact with customers RHI has detailed knowledge of the requirements that steelworkers place on refractories. This is why RHI has been involved in the development of package and system solutions for many years und nowadays offers customized high-end solutions for basically all individual customer requirements.</p>
    </div>  
  
</div>
<!-- clickMap text -->
      <div id="clickMap_item_9510" class="clickMapItem text" style="display: none;">
        <a href="#" class="close" onclick="backClose();" return false;">back</a>
        <p>text</p>
    </div>                                                                       
<!-- clickMap gallery -->
      <div id="clickMap_item_10450" class="clickMapItem multiImageText" style="display: none;">
          <a href="#" class="close" onclick="backClose();" return false;">back</a>
        <p>text</p>
    </div>                                                                                       
 <!-- clickMap text -->
      <div id="clickMap_item_11004" class="clickMapItem text" style="display: none;">        
        <a href="#" class="close" onclick="backClose();" return false;">back</a>
        <p>text</p>
    </div>   
<!-- clickMap gallery -->
      <div id="clickMap_item_11006" class="clickMapItem multiImageText" style="display: none;">
         <a href="#" class="close" onclick="backClose();" return false;">back</a>
        <p>text</p>
    </div>                                                                                        
<!-- clickMap text -->
      <div id="clickMap_item_11024" class="clickMapItem text" style="display: none;">
          <a href="#" class="close" onclick="backClose();" return false;">back</a>
        <p>text</p>
    </div> 
        
          </div>
</div>

JavaScript onclick将样式从display none更改为显示块

0 个答案: