如何通过数组更改JavaScript中的图像源？

问题描述：

我有一个模板列的网格，并在该列中我有文本和图标，
上的图标mousehover（在模式）和mousehoverout（关闭模式）我正在更改图标。如何通过数组更改JavaScript中的图像源？

现在，当用户点击图标时，它会打开一个弹出窗口，图标必须处于“开”模式，但如果用户没有关闭点击另一行的图标，则以前必须关闭，并且当前应该处于开模式。

所以对于我写了这个：

<DataItemTemplate> 
    <div class="floatLeft titleBlock"> 
         <a href="<%# Eval("Link") %>" class="ellipsesTooltip"><span> 
          <%# Container.Text%></span><%# Container.Text%></a></div> 
        <div class="floatRight"> 
         <a onclick="GridValueCatcherMoreLike(this, '<%# Eval("ResearchNoteId").ToString()%>');"> 
          <img alt="+/- 30 days matching Author, Industry, Theme" src="../Image/Research/MoreByOff.gif" onClick="check(this,'../Image/Research/MoreByOn.gif', '../Image/Research/MoreByOn.gif');" 
           onmouseover="ToggleAuthorMoreLikeImage(this, 'MoreLikePopUp', '../Image/Research/MoreByOn.gif', '../Image/Research/MoreByOff.gif');" 
           onmouseout="ToggleAuthorMoreLikeImage(this, 'MoreLikePopUp', '../Image/Research/MoreByOff.gif', '../Image/Research/MoreByOff.gif');" /> 
         </a> 
        </div>

function check(sender, onImg, offImg) { 
    debugger; 
    for(var i=0;i<activeImgList.length;i++) 
    {   
     if(sender!=activeImgList[i]) 
      activeImgList[i].scr = offImage; 
     else  
      activeImgList[i].scr = onImg; 
    } 
    return true; 
} 



function ToggleAuthorMoreLikeImage(sender, popupname, imageurl, offImageurl) 
{ 
    var win = ResearchPopup.GetWindowByName(popupname); 
    if (!ResearchPopup.IsWindowVisible(win)) 
    {   
     sender.src=imageurl; 
     activeImgList[arrayIndex]=sender; 
     arrayIndex = arrayIndex + 1; 
    } 
    else 
    { 
     activeImgList[arrayIndex] = sender; 
     arrayIndex = arrayIndex + 1; 
     return; 
    } 
}

你能发布生成的HTML代码？（在浏览器中查看源代码） – 2011-02-25 12:10:56

您是否对所有图标使用相同的开/关图像？ – 2011-02-25 12:13:27

@Sime Vidas：是 – 2011-02-25 12:17:28

答

为什么不退一步，并使用类似的客户端jQuery.toggleClass()或jQuery.hover()？

.hover（）

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    ul { margin-left:20px; color:blue; } 
    li { cursor:default; } 
    span { color:red; } 
</style> 
    <script src="http://code.jquery.com/jquery-1.5.js"></script> 
</head> 
<body> 
    <ul> 
    <li>Milk</li> 
    <li>Bread</li> 
    <li class='fade'>Chips</li> 

    <li class='fade'>Socks</li> 
    </ul> 
<script> 
$("li").hover(
    function() { 
    $(this).append($("<span> ***</span>")); 
    }, 
    function() { 
    $(this).find("span:last").remove(); 
    } 
); 

//li with fade class 
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);}); 

</script> 

</body> 
</html>

.toggleClass（）

<!DOCTYPE html> 
<html> 
<head> 
    <style> 

    p { margin: 4px; font-size:16px; font-weight:bolder; 
     cursor:pointer; } 
    .blue { color:blue; } 
    .highlight { background:yellow; } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.5.js"></script> 
</head> 
<body> 
    <p class="blue">Click to toggle</p> 
    <p class="blue highlight">highlight</p> 
    <p class="blue">on these</p> 
    <p class="blue">paragraphs</p> 
<script> 
    $("p").click(function() { 
     $(this).toggleClass("highlight"); 
    }); 
</script> 

</body> 
</html>

如何通过数组更改JavaScript中的图像源？

相关推荐