如何在JavaScript中创建“悬停和<img>更改”的简单改进版本?

安德森·科(Anderson Koh)

我正在做一个JavaScript函数,将其悬停在任何<a>元素上,<img><p>相应地更改src

我正在练习和学习JavaScript。因此,我创建了一个超级简单的JavaScript函数代码。

function onHover() {

    var pistiProducts = [
        "https://temp1.asign.pro/wp-content/uploads/2019/05/test-1.jpg",
        "https://temp1.asign.pro/wp-content/uploads/2019/05/test-2.jpg"
    ];

    var replace = document.getElementById("replacement");
    var itemdec = document.getElementById("text-replacement");

    replace.src = pistiProducts[1];
    itemdec.innerHTML = "Test 1";

}

在我的HTML中:

<div class="dropdown-menu-wrapper d-flex">                                               
  <div class="dropdown-item-wrapper flex-grow-1">                                                
    <a id="pisti-products" onmouseover="onHover();" class="pisti-products" href="#">Action</a>                                                   
    <a class="" href="#">Another action</a>                                                      
    <a class="" href="#">Something else here</a>                                                         
    <a class="" href="#">Something else here</a>                                                         
    <a class="" href="#">Something else here</a>                                                         
    <a class="" href="#">Something else here</a>                                                         
    <a class="" href="#">Something else here</a>                                                     
    <a class="" href="#">Something else here</a>                                                         
    <a class="" href="#">Something else here</a>                                                     
    <a class="" href="#">Something else here</a>                                                     
    <a class="" href="#">Something else here</a>                                                     
    <a class="" href="#">Something else here</a>                                                     
    <a class="" href="#">Something else here</a>                                                 
  </div>

  <div class="dropdown-display-wrapper">                                                     
    <div class="display-img replacement">                                                            
     <img id="replacement" class="w-100 img-fluid" src="https://temp1.asign.pro/wp-content/uploads/2019/05/test-1.jpg" alt="">                                                       
    </div>                                                       
    <p class="mb-0 w-100 pisti-title" id="text-replacement">Another action</p>                                                   
  </div>                                                 
</div>

当前我要做的是编写13个函数并将其设置onmouseover=""为相关函数但是我认为这不是最好的解决方案,因为我还有很多事情要做。

如您所见,我的JavaScript代码已包含在内Array但是我不知道可以用数组做什么。:(

我需要帮助以建议我最佳和简便的解决方案。请用JavaScript代码而不是jQuery建议我。我对基本的JavaScript语法和结构不好。

卡米尔(KamilKiełczewski)

n向您的函数添加参数onHover(n)

function onHover(n) {

    var pistiProducts = [
        "https://temp1.asign.pro/wp-content/uploads/2019/05/test-1.jpg",
        "https://temp1.asign.pro/wp-content/uploads/2019/05/test-2.jpg"
    ];

    var replace = document.getElementById("replacement");
    var itemdec = document.getElementById("text-replacement");

    replace.src = pistiProducts[n%2];
    itemdec.innerHTML = `Test ${n}`;

}
img { height: 100px;}
<div class="dropdown-menu-wrapper d-flex">                                               
  <div class="dropdown-item-wrapper flex-grow-1">                                                
    <a id="pisti-products" onmouseover="onHover(0)" class="pisti-products" href="#">Action</a>                                                   
    <a class="" onmouseover="onHover(1)" href="#">Another action</a>                                                                                                       
    <a class="" onmouseover="onHover(2)" href="#">Something else here</a>                                                         
    <a class="" onmouseover="onHover(3)" href="#">Something else here</a>                                                         
    <a class="" onmouseover="onHover(4)" href="#">Something else here</a>                                                         
    <a class="" onmouseover="onHover(5)" href="#">Something else here</a>                                                     
    <a class="" onmouseover="onHover(6)" href="#">Something else here</a>                                                         
    <a class="" onmouseover="onHover(7)" href="#">Something else here</a>                                                     
    <a class="" onmouseover="onHover(8)" href="#">Something else here</a>                                                     
    <a class="" onmouseover="onHover(9)" href="#">Something else here</a>                                                     
    <a class="" onmouseover="onHover(10)" href="#">Something else here</a>                                                     
    <a class="" onmouseover="onHover(11)" href="#">Something else here</a>          
    
    <a class="" onmouseover="onHover(12)" href="#">Something else here</a> 
  </div>

  <div class="dropdown-display-wrapper">                                                     
    <div class="display-img replacement">                                                            
     <img id="replacement" class="w-100 img-fluid" src="https://temp1.asign.pro/wp-content/uploads/2019/05/test-1.jpg" alt="">                                                       
    </div>                                                       
    <p class="mb-0 w-100 pisti-title" id="text-replacement">Another action</p>                                                   
  </div>                                                 
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章