个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 10:22:53 25 4
gpt4 key购买 nike

我有一个带有模板列的网格，在该列中我有文本和图标，
在图标鼠标悬停(打开模式)和鼠标悬停(关闭模式)上我正在更改图标。

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

为此我写了这个:

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

最佳答案

为什么不退后一步并使用类似 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 - 如何通过数组更改JavaScript中的图像源？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5117022/

25 4 0
文章推荐： ios - 在 UITableViewCell 的左侧添加垂直条
文章推荐： jquery - 如何在使用 jQuery 悬停另一个元素时使一个元素具有 'hover' 效果(CSS)？
文章推荐： Css 旋转平行四边形文字
文章推荐： css - 如何使用 CSS3 选择器选择每个偶数元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com