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

2 番目の部分では、jQuery には.css()、一致した要素の css-property を設定できる関数が含まれています。
たとえば、 div の background-image を変更したい場合:

$(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 に答える