jQuery - exp mit is() _03

.one click | :contains

by juErik

HTML

<div></div>

<div class="blue"></div>
<div></div>
<div class="red"></div>
 
<div><br/><span>Peter</span></div>
<div class="blue"></div>
<p>&nbsp;</p>

CSS

div { width:60px; height:60px; margin:5px; float:left;
      border:4px outset; background:green; text-align:center;
      font-weight:bolder; cursor:pointer; }
  .blue { background:blue; }
  .red { background:red; }
  span { color:white; font-size:16px; }
  p { color:red; font-weight:bolder; background:yellow;
      margin:3px; clear:left; display:none; }

JavaScript

/*  Zeigt ein paar Möglichkeiten, wie is() in einem Event-Handler verwendet werden kann.

    * die boxen können alle nur einmal geklickt werden
    * beim klick ädert sich der 'border-style' und der hover curser 
    * :contains('Peter') ???
*/

$("div").one('click', function () {
    if ($(this).is(":first-child")) {
      $("p").text("It's the first div.");
    } else if ($(this).is(".blue,.red")) {
      $("p").text("It's a blue or red div.");
    } else if ($(this).is(":contains('Peter')")) {
      $("p").text("It's Peter!");
    } else {
      $("p").html("It's nothing <em>special</em>.");
    }
    $("p").hide().slideDown("slow");
    $(this).css({"border-style": "inset", cursor:"default"});
  });