html要素のフォーマット

6122 ワード

jQuery

2つのdiv並べ替えを実現

<div id="div1" style="display: inline-block">smx1div>
<div id="div2" style="display: inline-block">smx2div>

ボタンAをクリックして、自分を隠し、同じ場所にボタンBを表示する
htmlコード

<body>
    <div class='btnBox'>

        <button id='editBtn' onclick='editItem(this)'>  button>
        <button id='deleteBtn' onclick='deleteItem()'>  button>
        <button id='saveBtn' onclick='saveItem(this)'>  button>
        <button id='cancelBtn' onclick='cancelItem(this)'>  button>
    div>
body>


<style>
.btnBox {
    width: 100px;
    position: relative;
}

/*                */
.btnBox .editBtn, .btnBox .saveBtn {
    position: absolute;
    left: 10px;
    top: 0px;
    height: 18px;
}
/*                */
.btnBox .cancelBtn, .btnBox .deleteBtn {
    position: absolute;
    left: 50px;
    top: 0px;
    height: 18px;
}
style>

jsコード

<script>
    $(function() {
        $("#saveBtn,#cancelBtn").hide();//            

    })
    function editItem(obj) {
        $(obj).hide();
        $(obj).next().hide();
        $(obj).next().next().show();
        $(obj).next().next().next().show();
    }

    function saveItem(obj) {
        $(obj).hide(); //        
        $(obj).next().hide();
        $(obj).prev().show();
        $(obj).prev().prev().show();

    }

    function cancelItem(obj) {//    
        $(obj).hide();
        $(obj).prev().hide();
        $(obj).prev().prev().show();
        $(obj).prev().prev().prev().show();
    }
script>

jQueryは京東左側の物品ナビゲーションバーに倣う

jQuery操作SelectのOption上下移動や追加削除など