JQ作业-相册管理器

$(document).ready(function(){
// 给按钮添加事件
    $('button.add').on('click', function(){
     // alert('请选择一张图片')

     var img_url = $('#img_url').val()

     if (img_url.length == 0) {
      alert('请选择一张图片')
      $('#img_url').focus()
      return false
     }

     // 获取图片类型
     var img_type = $(':radio:checked').val();
   
     // console.log(img_type)
     
     // 获取是否添加阴影
     var shadow = 'none'
     if ($(':selected').val() == 1) {
      shadow = '3px 3px 3px #666';
     }

     
     // console.log(shadow)
     // 第二步：创建图片并添加固有元素：
     var img = $('<img>')
         .prop ('src', img_url)
         .width(150)
         .height(150)
         .css({
          'border-radius': img_type,
          'box-shadow': shadow
         })

        // 创建三个按钮，前移，后移和删除
     var before = $('<button>').text('前移');
     var after = $('<button></button>').text('后移')
     var remove = $('<button></button>').text('删除')
     

     // 将三个按钮添加到页面后面
     var li = $('<li>').append(img,before,after,remove )

     // 将图片添加到页面中
     li.appendTo('ul')

    // ////////////////////////////////////// //////////////////////////////////
        // 前移操作：
     before.click(function() {
   $(this).parent().prev().before($(this).parent())
  });

  // 后移操作：
  after.click(function() {
   $(this).parent().next().after($(this).parent())
  });
     

        // 删除操作：        remove.click(function() {
            $(this).parent().remove()
        });

    })
})