0

我有一个显示列表的简单 HTML 页面。列表中的每个项目都是一个 div 元素（圆角框），其中包含一些数据和一个复选框。
现在我正在尝试为 div 提供复选框的功能，这意味着当用户单击 div 我希望它更改颜色（或显示 V 的图像）以及当用户提交页面时我想要所有项目已检查要发送的 ID。
这是 HTML 的片段：

<!-- item only list -->     
<div class="container">
  <ul class="plainList">
    <c:forEach items="${itemsFrom.itemsOnly}" var="item" varStatus="status">            
      <li>
        <div class="inner">
          <img src="resources/images/${item.id}.png">           
          <ul class="plainList">             
            <li><h4>${item.title} &trade;</h4></li>              
            <li><h5>${item.description}</h5></li>            
          </ul>            
          <input style="float: right;" type="checkbox" name="itemIds" value="${item.id}" />           
          <div style="clear: both"></div>           
        </div>           
      </li>         
    </c:forEach>      
  </ul>     
</div>

谁能帮我开始：JQuery？CSS?。有什么简单的例子吗？

4

2 回答 2

0

像这样的东西可能会帮助你。我不知道您希望哪些 div 具有此功能，但我建议将它们分组。

$(".inner").click(function(){
   $(this).css("background-color", "red");
})
于 2012-06-05T14:40:49.163 回答
0

你读过jQuery API吗？
有多种方法可以实现您的目标，但对我来说，更有效的是使用 jQuery 和 event click。
在您的示例中，您必须click在每个具有 class 的 div 上绑定事件inner。
语法是：

$(document).ready(function(){
    $(".inner").click(function(){
        //Do some stuff
    });
});

在第二部分中，jQuery 包含.css()允许您设置匹配元素的 css-property 的功能。
例如，如果您想更改 div 的背景图像：

$(document).ready(function(){
    $(".inner").click(function(){
        $(this).css("background-image","url(path/to/your/image)");
    });
});

你会明白这段代码不会重现“复选框功能”，而只是改变你div曾经的背景。
您应该看一下 jQuery 事件.toggle()。

为了帮助您，这是执行您想要的操作的语法：

    $(document).ready(function(){

        $(".inner").toggle(
            function(){
                $(this).css("background-image","url(path/to/your/image1)");    
            },
            function(){
                $(this).css("background-image","url(path/to/your/image2)");
            }
        );

    });
于 2012-06-05T14:51:00.533 回答