JQUERY UI使用者介面設計

排列頁面內的元素

|

195

ui.item.draggable ("destroy");

},

update : function (event, ui)

{

$("div#titles h4").each (function (index)

{

var titleClass = this.className;

var isSameClass = $(this).next().hasClass (titleClass);

var isOneImg = $(this).next().next ().length == 0 ||

!$(this).next().next ()[0].tagName.match (/img/i);

if (isSameClass && isOneImg) $(this).css ({ "color" : "red" });

else $(this).css ({ "color" : "black" });

});

}

});

</script>

圖 12-10　加入視覺效果以顯示正確的配對

196

|

第十二章

我們在

update(event, ui)

方法裡檢查每個標題後面是不是都跟著對應的圖片。為了檢

查，我們為每個標題指定了 CSS class（

"html" ...