从其asp Repeater中的数据更改jQuery手风琴头的颜色

本文关键字：jQuery 手风琴 颜色 数据 asp Repeater 从其 | 更新日期: 2023-09-27 18:30:38

我有一个jQuery手风琴，它位于asp中继器中

，模板如下所示： 
<asp:Repeater ID="repAccordion" runat="server">
        <ItemTemplate>
            <h3 id="head">
                <span><%#Eval("value1") %>   <%#Eval("value2") %></span>
                <span class="status">Status: <%#Eval("statusValue") %></span>    
            </h3>
            <div></div>
        <ItemTemplate>

在大多数情况下，手风琴中应该有多个值。 有没有办法根据从绑定中继器数据中获取的"statusValue"变量中的值循环访问和更改标头的颜色？ 我想根据 3 种状态为它们着色。 谢谢！

从其asp Repeater中的数据更改jQuery手风琴头的颜色

没有 JavaScript

与其在全部呈现后使用 JavaScript 更改标头，不如根据每个状态创建一个 CSS 类，然后使用该statusValue设置该类。 像这样：

<h3 id="head" class="status_<%#Eval("statusValue") %>">

那么你的CSS会像：

.status_low {color:green;}
.status_medium {color:yellow;}
.status_high {color:red;}

使用 JavaScript

如果您出于某种原因稍后确实需要在 JavaScript 中访问状态，您仍然需要类似的东西，但将状态输出为 s data- 属性，以便您将值与标头一起"存储"：

<h3 id="head" data-status="<%#Eval("statusValue") %>"><%#Eval("statusValue") %></h3>

渲染输出

$('h3').each(function() {
  var status = $(this).data('status');
  switch(status) {
      case 'low':
        $(this).css('color', 'green');
        break;
      case 'medium':
        $(this).css('color', 'yellow');
        break;
      case 'high':
        $(this).css('color', 'red');
        break;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<h3 id="head" data-status="low">low</h3>
<h3 id="head" data-status="medium">medium</h3>
<h3 id="head" data-status="high">high</h3>

相关文章：