jQueryケースの星評価

jQueryは方法が多く、多く練習するのが上策です
ケース:

        

    
1
    
2
    
3
    
4
    
5

var aMsg = [
    "    |     ，          ，    ",
    "   |     ，        ，   ",
    "  |    ，          ",
    "  |    ，          ，      ",
    "    |     ，          ，    "
]
$(function () {

    $("li").on("mouseenter",function () {
        index=$(this).index();
        $("li").removeClass("on");
        $(this).addClass("on").prevAll().addClass("on");
        $("p").html("" + (index+1) + "   " + aMsg[index].match(/(.+)\|/)[1] + "" + aMsg[index].match(/\|(.+)/)[1]).css({display:"block",left:(index+1)*24});

    })
    $("li").on("mouseleave",function () {
        $(this).removeClass("on").prevAll().removeClass("on");
        $(".add").addClass("on").prevAll().addClass("on");
        $("p").css("display","none")
    })
    $("li").on("click",function () {
        $(this).addClass("add").nextAll().removeClass("add");
        // $("span").eq(1).html($("p").text())
        $("span").eq(1).html("" + (index+1) + "   " + aMsg[index].match(/(.+)\|/)[1] + "" + aMsg[index].match(/\|(.+)/)[1]).css({display:"block",left:(index+1)*24})
    })
})

このケースデザインon()の登録イベント//解縛イベント:off()$("p").on(“click mouseenter”,function () { alert(“hhe”) })

// $("p").off()//           
$("p").off("mouseenter")

$("button").on("click",function () {
    $("p:last").click();
    //    trigger（type）
    $("p:last").trigger('click')

今回のケースは方法が多くなくて、原理はとても簡単で、つなぎ合わせる方法について詳しく正規表現を理解することができます