亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

可排序列表 - 與正確的順序進行比較并將類添加到正確的位置

可排序列表 - 與正確的順序進行比較并將類添加到正確的位置

翻閱古今 2023-10-20 16:15:23
我想制作可排序的拖放列表,并在按鈕上 - 將其與實際正確的順序進行比較(將其想象為完成任務 X 所需的步驟)。我使用列表 ID 來做到這一點(對我來說是最簡單的方法)。$(function() {  $("#sortable").sortable({    scroll: false,    placeholder: "ui-state-highlight"  });  $("#sortable").disableSelection();});function checkOrd() {  var items = $('#sortable li').map(function() {    return $.trim($(this).attr('id'));  }).get();  var itsort = $('#sortable li').map(function() {    return $.trim($(this).attr('id'));  }).get();  console.log(items);  console.log(itsort);  itsort.sort();  if (JSON.stringify(items) == JSON.stringify(itsort)) {    console.log('good!');  } else {    console.log('wrong!');  }};.ui-state-correct {  font-weight: bold;  color: #8bd333;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><ul id="sortable">  <li id="dd01" class="ui-state-default">1.</li>  <li id="dd02" class="ui-state-default">2.</li>  <li id="dd03" class="ui-state-default">3.</li>  <li id="dd04" class="ui-state-default">4.</li>  <li id="dd05" class="ui-state-default">5.</li>  <li id="dd06" class="ui-state-default">6.</li>  <li id="dd07" class="ui-state-default">7.</li></ul><p class="check"></p><button onclick="checkOrd();">check</button>正如你所看到的,我得到了做 D&D 列表并檢查一切是否到位的部分。我還想要的是:如果整體順序錯誤,我想將 addClass("ui-state- Correct") 添加到正確排序的元素中。就像正確的順序顯然是 1,2,3 并且如果用戶單擊按鈕并且他的順序是 1,3,2 - 我想將類“ui-state- Correct”添加到 id dd01 的元素中。否則 - 由于用戶可以多次檢查訂單,如果他弄亂了正確的答案,我想取消“ui-state- Correct”課程:)https://jsfiddle.net/mjro3vba/3/ 為了方便起見:)
查看完整描述

1 回答

?
慕運維8079593

TA貢獻1876條經驗 獲得超5個贊

如果給定位置的值相同,您可以比較items數組和數組值,只需將類添加到您的ie 中:并且您可以在排序再次開始時刪除添加的這些類。itsortli$("#" + value).addClass("ui-state-correct")


演示代碼:


$(function() {

  $("#sortable").sortable({

    scroll: false,

    placeholder: "ui-state-highlight",

    start: function(event, ui) {

      //remove class whenever sortable start again

      $("#sortable li").removeClass("ui-state-correct")

    }

  });

  $("#sortable").disableSelection();

});


function checkOrd() {

  var items = $('#sortable li').map(function() {

    return $.trim($(this).attr('id'));

  }).get();

  var itsort = $('#sortable li').map(function() {

    return $.trim($(this).attr('id'));

  }).get();

  itsort.sort();

  //loop through array

  $(items).each(function(index, value) {

    //check if both array have same at given position

    if (value == itsort[index]) {

      //add class there

      $("#" + value).addClass("ui-state-correct")

    }


  })


  if (JSON.stringify(items) == JSON.stringify(itsort)) {

    console.log('good!');

    $(".check").text("good");

  } else {

    console.log('wrong!');

    $(".check").text("wrong");

  }

};

.ui-state-correct {

  color: green;

}

<head>


  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

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

</head>

<ul id="sortable">

  <li id="dd01" class="ui-state-default">1.</li>

  <li id="dd02" class="ui-state-default">2.</li>

  <li id="dd03" class="ui-state-default">3.</li>

  <li id="dd04" class="ui-state-default">4.</li>

  <li id="dd05" class="ui-state-default">5.</li>

  <li id="dd06" class="ui-state-default">6.</li>

  <li id="dd07" class="ui-state-default">7.</li>

</ul>

<p class="check">

</p>

<button onclick="checkOrd();">check</button>


查看完整回答
反對 回復 2023-10-20
  • 1 回答
  • 0 關注
  • 123 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號