作る私は「大きな」選択ボックスを作りたい

Question

カスタムdivの枠で選択ボックス、

<ul> 
     <li> 
     <div class="sbox"> 
      <img src=img/typeA.jpg></img><br/> 
      <span>Item X</span> 
     </div> 
     </li> 

     <li> 
     <div class="sbox"> 
      <img src=img/typeA.jpg></img><br/> 
      <span>Item X</span> 
     </div> 
     </li> 

     <li> 
     <div class="sbox"> 
      <img src=img/typeA.jpg></img><br/> 
      <span>Item X</span> 
     </div> 
     </li> 
    </ul> 

あなたがそれぞれ「LI」になめる場合は、あなたが選択を行い、そして私は境界線の色を変更しますそれの。

どのようにですか？それはタグではなく、あなたはそれをクリックできますか？ "

ありがとうございます！

Answer 1

$("li div").click(function (e) { 
$(this).css("border-color","red"); 
}); 

Answer 2

あなたは、各リチウムをクリックし、li要素のクラスを変更したり、CSSの境界線スタイルを追加することにより、イベントの結果としての境界線を変更処理するためにjqueryのを使用することができます。

Answer 3

は以下の抜粋です。 htmlページの本文に置いて、listItemをクリックしてみてください。

<ul> 
    <li>my li</li> 
    <li>another li</li> 
</ul> 

<script> 
    var lis = document.getElementsByTagName("li"); 
    for(var j = 0, ceiling = lis.length; j < ceiling; j++) { 
     lis[j].onclick = function() { 
      var lis = document.getElementsByTagName("li"); 
      for(var i = 0, ceiling2 = lis.length; i < ceiling2; i++) { 
       lis[i].style.border = "0px solid white"; 
      } 
      this.style.border = "1px solid green"; 
     }; 
    } 
</script> 

Answer 4

境界が、要素タグにこれを追加必要なすべての場合：

onclick="this.style.border='1px solid red'" 

もCSSのカーソルを追加します。手に素敵な再生されます迅速

Answer 5

何かを作るために李へのポインタ別のliがあなたのページにあるかもしれませんが、あなたはこの "選択可能な"もののように振舞いたくありません。

まず、あなたが選択できるようにしたい<li>要素にユニークなクラス名を適用します。

<li class="selectable"> 

そして、あなたは通常、あなたのJSコードをinitiallizeこのjQueryのコードを置くことができます。

$().ready(function() { 
    $("li.selectable").bind('click', function(e) { 
     $(this).find("div.sbox").css('border', '1px solid red'); 
    }); 
}); 

を$().readyは、ドキュメント対応のためのショートカットです。ユーザーが<li>要素をクリックしてselectable css classNameという要素をバインドします。ボーダーは、あなたのHTMLコードに続いて、クラス名 "sbox"を持つ内部divに適用されます。

境界線を<li>に適用する場合は、find("div.sbox")部分を削除してください。