Question

我有一个带有模板列的网格，在该列中我有文字和图标，
on icon mousehover（on mode）和mousehoverout（off mode）我正在更改图标。

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

所以我写了这个：

<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;
    }
}

Answer 1

为什么不退后一步，在客户端使用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中的图像源？

1 个答案: