JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://foodsafety.stust.edu.tw/JavaScript/jquery-ui.js"></script>
<link rel="stylesheet" href="https://foodsafety.stust.edu.tw/css/jquery-ui.structure.css">
<link rel="stylesheet" href="https://foodsafety.stust.edu.tw/css/jquery-ui.theme.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://foodsafety.stust.edu.tw/JavaScript/datepicker-zh-TW.js"></script>
<!--Ajax變更按鈕圖示動畫-->
<div class="FeedbackCode container">
    <div id="admindate1" class="col-sm-6 text-center">
        <div class="input-group">
            <div class="input-group-addon">變更資料成功</div>

            <input type="text" value="點右邊按鈕" id="ExpDateTextBox" class="form-control hasDatepicker">
            <div class="input-group-btn true">
                <div class="btn btn-info"><i class="glyphicon glyphicon-floppy-disk" style="display: inline-block;"></i></div>
            </div>
        </div>
    </div>
	
	<div id="admindate2" class="col-sm-6 text-center">
        <div class="input-group">
            <div class="input-group-addon">變更資料失敗</div>

            <input type="text" value="點右邊按鈕" id="ExpDateTextBox" class="form-control">
            <div class="input-group-btn false">
                <div class="btn btn-info"><i class="glyphicon glyphicon-floppy-disk" style="display: inline-block;"></i></div>
            </div>
        </div>
    </div>
</div>

CSS

.input-group{
  margin:15px;  
}
.input-group-addon {
    color: rgb(255, 255, 255);
    background-color: rgb(50, 118, 177);
    border-color: rgb(40, 94, 142);
}

JavaScript

$("document").ready(function () {
        /*儲存按鈕事件*/
        $(".input-group div.input-group-btn").on("click", function () {	
			var $this = $(this);			
            SetDate($this,$this.hasClass("true"));
        });
    });

    function SetDate($this,success) {
			
            var $i = $this.find("i");
            $i.fadeOut(function () {
                $i.removeClass("glyphicon-floppy-disk");
                $i.addClass("glyphicon-cloud-upload");
            });
            $i.fadeIn();

            var data = "";

			//某個回傳事件
            /*var request = $.ajax({
                asyn: false,
                url: ".",
                method: "POST",
                data: { data: data },
                dataType: "json"
            });*/

			//某個回傳結果
            //request.done(function (json) {

                //var r = json.result;
                if (success != false) {                    
										/*下面一堆只是動畫效果*/
                    $i.fadeOut(function () {
                        $i.removeClass("glyphicon-cloud-upload");
                        $i.addClass("glyphicon-ok");
                        $i.css("color", "green");
                    });
                    $i.fadeIn();
                    $i.fadeOut(function () {
                        $i.removeClass("glyphicon-ok");
                        $i.css("color", "");
                        $i.addClass("glyphicon-floppy-disk");
                    });
                    $i.fadeIn();
                    /*上面一堆只是動畫效果*/
                    return data;
                } else {
										/*下面一堆只是動畫效果*/
                    $i.fadeOut(function () {
                        $i.removeClass("glyphicon-cloud-upload");
                        $i.addClass("glyphicon-remove");
                        $i.css("color", "red");
                    });
                    $i.fadeIn();
                    $i.fadeOut(function () {
                        $i.removeClass("glyphicon-remove");
                       ...