machen eine Auswahlbox mit benutzerdefinierten div Rahmen

Question

ich eine „große“ Auswahlbox

<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> 

, machen möchten, wenn Sie auf jeder „li“ lecken Sie eine Auswahl zu treffen, und ich werde die Grenzfarbe ändern davon.

Aber wie? Es sind keine "" -Tags, können Sie darauf klicken?

Danke!

Answer 1

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

Answer 2

Sie können jQuery verwenden, um auf jedem li Griff klicken und dann die Grenze als Folge des Ereignisses ändern, indem die Klasse des li-Elements zu ändern oder eine Grenze Stil in CSS hinzufügen.

Answer 3

unten sind ein paar Schnipsel; Setzen Sie es einfach in den Text einer HTML-Seite und versuchen Sie es mit einem 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

wenn Grenze ist alles, was Sie diesen Tag auf das Element müssen hinzufügen:

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

auch CSS-Cursor hinzu: Zeiger auf den li die Hand schnell

Answer 5

Etwas zu machen, die schön spielen mit anderen li könnten Sie in Ihrer Seite haben, aber Sie wollen sich nicht wie diese "auswählbaren" verhalten.

Zuerst eine eindeutige Klassenname zu <li> Elemente gelten Sie wählbar sein wollen:

<li class="selectable"> 

Und dann können Sie diese jQuery-Code setzen, wo Sie in der Regel Ihre JS Code initiallize:

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

$().ready ist eine Verknüpfung für Dokument bereit. Wir binden eine Funktion, wenn der Benutzer <li> Elemente mit selectable css className klickt. Der Rahmen wird auf den inneren div mit className "sbox" angewendet, nach Ihrem HTML-Code.

Wenn Sie möchten, dass die Umrandung auf die <li> selbst angewendet wird, entfernen Sie einfach den find("div.sbox") Teil.