如何通過數組更改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; 
    } 
}

來源

2011-02-25 Jeevan Bhatt

你能發佈生成的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>

來源

2011-02-25 14:17:43

如何通過數組更改JavaScript中的圖像源？

回答

相關問題