Question

简介：

我有一个带链接按钮的转发器，当我点击某个按钮时，我想要它，只有它变得透明，其余的按钮不会改变。

d-尾巴：

我有一个LinkButtons的转发器：

<div style="position: relative">
<asp:Repeater runat="server" ID="repStatuses" 
        onitemdatabound="repStatuses_ItemDataBound"
        onitemcommand="repStatuses_ItemCommand">
  <ItemTemplate>
        <div id="divLinkBtn" style="display:inline"><asp:LinkButton ID="linkBtnStatuses" runat="server" CommandName="ShowText" 
            CommandArgument='<%# Eval("Priority") + ";" + Eval("LevelID") + ";" + Eval("ID") %>'
            OnClientClick='<%# "MyFunc(" + Eval("Priority") + ");" %>'>
            <div runat="server" id="divSts" class="fontAriel" ></div>
        </asp:LinkButton></div>
  </ItemTemplate>
    </asp:Repeater>
</div>

LinkButtons使用以下Jquery函数淡入Page_Load。这是Page_Load和jquery代码：

的Page_Load：

protected void Page_Load(object sender, EventArgs e)
{
    SetPageTitle();

    if (!Page.IsPostBack)
    {
        LoadStatusesAndButtons();

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBarWithFadeIN();</script>", false);
    }

    else
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBar();</script>", false);

}

Jquery的

function LoadBarWithFadeIN() {
$(document).ready(function () {

    $('a[id*="repStatuses"]').each(function () {
        $(this).show(2500);
        $(this).delay(1000);
    });
});

}

function LoadBar() {
$(document).ready(function () {

    $('a[id*="repStatuses"]').each(function () {
        $(this).show(0);

    });
});

}

当我点击一些LinkButton时，它变为透明。我发现这个code只使第一个linkButtons透明：

  $(document).ready(function () {
  $('#divLinkBtn').click(function () {
      alert('divlinkbutton presed');
      $(this).css({ 'opacity': 0.4 });
  });
});

问题是按钮变为透明一秒钟，然后页面加载LoadBar()功能，透明度消失。 另一件事是这个函数不处理剩下的按钮。

现在我需要的是这个LinkButton应该保持透明，直到我点击其他链接按钮。

我正在考虑一种方法来加载所有未被点击的按钮，并以某种方式加载具有trancparency的特定点击按钮，但由于缺乏编码经验，我找不到这样做的方法。

对于“简短”帖子感到抱歉：）

任何帮助都会非常感激!!!!!

Answer 1

第二页加载后按钮重新出现的可能原因是，在jQuery中完成的更改未保存在ViewState中，因此不会在回发之间保留。如果您在LinkButton点击后收到回发，则可以保存在服务器端单击的信息（即在处理点击事件的c＃代码中添加一个点击类）。然后，您可以更改客户端脚本以使用此类为所有LinkButton控件设置transprency（以及最近单击按钮的一些特殊处理）。您还可以定义一个类，为元素提供适当的透明度设置。如果您需要任何有关此代码的帮助，请与我们联系。

关于第二个问题，请注意您按ID获取元素，它在html页面的范围内应该是唯一的。这可能就是为什么它只适用于第一个。要使其适用于所有元素，请改用类。您可以在aspx中分配一个类，如下所示：

<div id="divLinkBtn" class="divLnkBtnClass" style="display:inline">... </div>

并分配点击处理程序，如下所示：

$(document).ready(function () {
$('.divLnkBtnClass').click(function () {
  alert('divlinkbutton presed');
  $(this).css({ 'opacity': 0.4 });
});
});

这应该使脚本适用于所有div。

我还没有测试过这段代码，所以如果您有任何问题请告诉我，以便我可以修复它并帮助您使其正常工作。

<强>更新

很少有方法可以保留回发的透明度。你得到每个项目点击的回发，所以我想保存它并恢复它服务器端将是达到预期效果的最简单方法之一。

首先，在代码隐藏中为您的页面添加一个私有字段：
```
private List<String> itemsClicked = null;
```
和您的aspx中的HiddenField控件（Repeater控件的 >：
```
<asp:HiddenField runat="server" ID="hfButtonsClicked" Value="" />
```
我们将使用此HiddenField来保存ClientID已点击的LinkButton个控件。

然后，在Page_Load方法中，使用隐藏字段中的值初始化字段：

protected void Page_Load(object sender, EventArgs e)
{
    SetPageTitle();

    //initialize itemsClicked before binding data to the repeater
    itemsClicked = hfButtonsClicked.Value.Split(new char[] { ';' }, StringSplitOptions.RemoveEmptyEntries).ToList();

    if (!Page.IsPostBack)
    {
        LoadStatusesAndButtons();

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBarWithFadeIN();</script>", false);
    }
    else
    {
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBar();</script>", false);
    }
}

接下来，向页面添加一个新方法，该方法将在下一步中使用：

private void SetOpacity(LinkButton linkButton, string opacityValue)
{
    linkButton.Style.Remove("opacity");
    linkButton.Style.Add("opacity", opacityValue);
}

最后一件事是在单击项目时添加保存id的代码，您可以使用click事件或只使用现有的OnItemCommand事件处理程序：

protected void repStatuses_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    //get LinkButton that was clicked
    LinkButton lnkBtnClicked = (e.CommandSource as LinkButton);
    if (lnkBtnClicked != null)
    {
        //if item was not clicked before, so the opacity is not set
        if (lnkBtnClicked.Style["opacity"] == null)
        {
            //save control ClientID in the HiddenField
            hfButtonsClicked.Value += String.Format(";{0}", lnkBtnClicked.ClientID);

            SetOpacity(lnkBtnClicked, "0.4");
        }
    }

    //the rest of the original code should be here
    //...
}

和方法在项目是数据绑定时恢复回发后的不透明度：

    protected void repStatuses_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        LinkButton lnkBtn = (e.Item.FindControl("linkBtnStatuses") as LinkButton);

        if (lnkBtn != null)
        {
            //if item was clicked before, so the opacity should be restored
            if (itemsClicked.Contains(lnkBtn.ClientID))
            {
                SetOpacity(lnkBtn, "0.4");
            }
        }

        //the rest of the original code should be here
        //...
    }

我在示例应用程序中实现了它，它似乎按预期工作。如果您在使用此代码时遇到任何困难，请与我们联系。

附加说明

您还可以使用ViewState对象代替其他HiddenField控件，但如果您想在jQuery中更改解决方案以保存/恢复不透明度，请使用HiddenField应该会容易得多。

还应对代码进行一些改进（即将字符串分隔符移动到只读变量或不硬编码不透明度属性的值），但我这样做是为了使答案更短，更少有点容易阅读。

Answer 2

经过一夜安眠，这里有一个简单的（不是最优雅的）解决方案：

 protected void repStatuses_ItemCommand(object source, RepeaterCommandEventArgs e)
{
   SetAsOriginal();

    //Get the linkbutton that was clicked
    LinkButton lnkBtnClicked = e.CommandSource as LinkButton;       //e- is the object of the repeater. CommandSource- is the clicked
    if (lnkBtnClicked != null)
    {
        SetOpacity(lnkBtnClicked, "0.4");
    }

private void SetAsOriginal()
{
    foreach (RepeaterItem item in repStatuses.Items)
    {
        LinkButton btn = item.FindControl("linkBtnStatuses") as LinkButton;
        SetOpacity(btn, "1.0");
    }
}

private void SetOpacity(LinkButton linkButton, string opacityValue)         //SET THE OPACITY TO THE SPECIFIC linkbutton 
{
    linkButton.Style.Add("opacity", opacityValue);
}

问题是，上面的答案非常好并且有效，但没有满足我的要求.. 我只需将点击的按钮设置为透明，其余的按钮是恢复原状。

所以我决定为可能遇到类似问题的人指定解决方案。

谢谢大家。

P.s：特别感谢@Lukasz M

ASP Repeater中的透明LinkButton在jquery点击事件上

2 个答案:

ASP Repeater中的透明LinkBut​​ton在jquery点击事件上

2 个答案:

ASP Repeater中的透明LinkButton在jquery点击事件上