Question

我做了一个“选择和重新排序”模块，在这个模块中我们拖放选项如果选项按正确的顺序排列，那么它会显示按钮以及这是正确的（如图所示）{{3} }

我已经将部分模块中的一半按钮部分留下了。任何人都可以为此指导我吗？

function eval()
{
    $( ".ui_color" ).each(function() {
        var x= $(this).attr('value');

         var y = $(this).parent().children().index(this) + 1;

  if(x==y)
  {
    alert('right')
  }
  else
  {
  alert('wrong');
  }
});
}

 $( function() {
        $( "#sortable" ).sortable({
          revert: true
        });
        $( "#draggable" ).draggable({
          connectToSortable: "#sortable",
          helper: "clone",
          revert: "invalid"
        });
        $( "ul, li" ).disableSelection();
      } );

       $( "#sortable" ).sortable({
          revert: true,

          update: function(event, ui){
            var currentOrder = '1,2,3';
            var sortOrder = [];
            $(event.target).find('li').each(function(){
              sortOrder.push($(this).attr('value')); 
            })
            if(sortOrder.join(',') === currentOrder){
              //alert('correct Answer');
            }else{
              //alert('wrong Answer');
            }
               alert('hi');
               var x= eval();
          }

        });

ul { 
        list-style-type: none; 
        margin: 0; 
        padding: 0;
        margin-bottom: 10px; 
     }
    .ui_color { 
        margin: 5px; 
        padding: 5px; 
        width: 570px; 
        height: 47px;
        background-color: #46B8DA;
        border: 1px solid #c5c5c5;
        font-weight: normal;
        color: #454545;
    }
    .header
    {
        border: 1px solid black;
        width: 569px;
        height: 37px;
        padding: 17px 0 0 11px;
        margin-left: 6px;
    }
    .bottom{
        display: inline;
        float: left;
        border-right: 1px solid;
        padding: 0px 6px 1px 6px;
        margin-right: 7px;
    }
    .tablelike
    {
        height: 450px;
    }
    .full_border
    {
        border: 1px solid #800080;
        width: 592px;
    }

<!doctype html>


            <title>jQuery UI Draggable + Sortable</title>
            <link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <script src="jq_assingment.js"></script>

        <body>
            <form name="drag_drop" id="drag_drop" class="full_border">
                <div class="header">
                    <span id="draggable" class="border">Choose & Re-order</span>
                </div>
                <div>   
                    <ul id="sortable" class="tablelike">
                        <li class="ui_color" value="1" correct_seq="">1.Typically a sentence contain a subject and practice.</li>
                        <li class="ui_color" value="2">2.Although it may make little sense taken in isolation out of context.</li>
                        <li class="ui_color" value="3">3.A sentence is a set of words that in principle tells a complete thought,</li>
                    </ul>
                </div>  
                <div class="">
                    <ul>
                        <li class="bottom">Review</li>
                        <li>Correct answer</li>
                    </ul>
                </div>
            </form> 
        </body>
    </html>

Answer 1

您可以使用解决方案https://jsfiddle.net/fLxatasw/

function eval()
{
    $( ".ui_color" ).each(function() {
        var x= $(this).attr('value');

         var y = $(this).parent().children().index(this) + 1;
	$('ul li:nth-child(' + y + ')').find('button').remove();
  if(x==y)
  {
    $('ul li:nth-child(' + y + ')').append('<button type="submit" class="right">Right</button>')
  }
  else
  {
  	$('ul li:nth-child(' + y + ')').append('<button type="submit" class="wrong">Wrong</button>')
  }
});
}

 $( function() {
        $( "#sortable" ).sortable({
          revert: true
        });
        $( "#draggable" ).draggable({
          connectToSortable: "#sortable",
          helper: "clone",
          revert: "invalid"
        });
        $( "ul, li" ).disableSelection();
      } );

       $( "#sortable" ).sortable({
          revert: true,

          update: function(event, ui){
            var currentOrder = '1,2,3';
            var sortOrder = [];
            $(event.target).find('li').each(function(){
              sortOrder.push($(this).attr('value')); 
            })
            if(sortOrder.join(',') === currentOrder){
              //alert('correct Answer');
            }else{
              //alert('wrong Answer');
            }
               var x= eval();
          }

        });

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form name="drag_drop" id="drag_drop" class="full_border">
    <div class="header">
        <span id="draggable" class="border">Choose & Re-order</span>
    </div>
    <div>   
        <ul id="sortable" class="tablelike">
            <li class="ui_color" value="1" correct_seq="">1.Typically a sentence contain a subject and practice.</li>
            <li class="ui_color" value="2">2.Although it may make little sense taken in isolation out of context.</li>
            <li class="ui_color" value="3">3.A sentence is a set of words that in principle tells a complete thought,</li>
        </ul>
    </div>  
    <div class="">
        <ul>
            <li class="bottom">Review</li>
            <li>Correct answer</li>
        </ul>
    </div>
</form>

如何根据jquery

1 个答案: