JQuery и JQuery Код пользовательского интерфейса работает на моем компьютере, но не связан со сторонними фреймворками, например. WordPress, Codepen

Question

Я создал этот Jquery UI Quiz для грамматического сайта Engli sh как черновик. Он отлично работает на моем компьютере, но не в связи со сторонними фреймворками, например, печатью слов или кодовым пером. Проблема в том, что к тексту поля ответа невозможно получить доступ, и, следовательно, массив результатов остается пустым.

Я полный новичок ie, поэтому, пожалуйста, простите, если это окажется полная ладья ie ошибка.

Вы можете проверить код по этой ссылке:

jQuery(document).ready(function(){

let arr = [];
let lösungen =["hates","plays","don't smoke"];

jQuery('#answer-container li').draggable({

    stack: "#answer-container li",
    helper:"clone",
    revert:'invalid',
    cursor:"move",       
})

jQuery('#answer-container').droppable({
    drop: function(event,ui){
      jQuery('#answer-container1').append(ui.draggable);    
   }   
})
   jQuery('.ziel').droppable({
     accept: ".drop",
     drop: function(event, ui){
     jQuery(this).append(ui.draggable);
     jQuery(this).droppable('option','accept',ui.draggable);
    },
     out: function(event, ui){

    console.log('out');
    jQuery(this).droppable('option','accept','.drop')
     }    
})

jQuery('#submitButton').click(function(){
arr = jQuery(".ziel").text().split("  ").slice(0,-1);

for (var i= 1; i <= lösungen.length; i++) {
  if(arr[i-1] == lösungen[i-1]){jQuery('#result'+i).html('<b>correct, good job!!</b> &#x1f44d;');jQuery('#ziel'+i).css('background-color','#5cb85c');}else if (arr.length!= lösungen.length){alert('bitte alle Fragen ausfüllen!'); return false;}else{jQuery('#result'+i).html("? richtig ist:  "+"<b>"+lösungen[i-1]+"</b>");jQuery('#ziel'+i).css('background-color','#d9534f');}

  console.log(arr.length);
 }
jQuery('.ziel li').draggable('destroy');
//return false;
})

});

https://codepen.io/ralf1981/pen/RwPpNQL

Answer 1

Рассмотрим следующий код.

jQuery(function($) {
  var arr = [];
  var lösungen = ["hates", "plays", "don't smoke"];

  function refreshPage() {
    window.location.reload();
  }

  $('#answer-container li').draggable({
    stack: "#answer-container li",
    helper: "clone",
    revert: 'invalid',
    cursor: "move",
  });

  $('#answer-container').droppable({
    drop: function(event, ui) {
      $('#answer-container1').append(ui.draggable);
    }
  });

  $('.ziel').droppable({
    accept: ".drop",
    drop: function(event, ui) {
      $(".ziel1", this).html(ui.draggable);
      $(this).droppable("disable");
    },
    out: function(event, ui) {
      $(this).droppable("enable");
    }
  });

  $('#submitButton').click(function() {
    $(".ziel").each(function(i, el) {
      arr.push($(".drop", el).text().trim());
    });
    console.log(arr);
    $.each(lösungen, function(i, l) {
      var ind = i + 1;
      if (arr[i] == lösungen[i]) {
        $('#result' + ind).html('<b>correct, good job!!</b> &#x1f44d;');
        $('#ziel' + ind).css('background-color', '#5cb85c');
      } else if (arr.length != lösungen.length) {
        alert('bitte alle Fragen ausfüllen!');
        return false;
      } else {
        $('#result' + ind).html("? richtig ist:  " + "<b>" + lösungen[i - 1] + "</b>");
        $('#ziel' + ind).css('background-color', '#d9534f');
      }
    });
    $('.ziel li').draggable('destroy');
    //return false;
  });
});

li {
  list-style: none;
  font-size: 15px;
  margin: 2px;
  border-radius: 5px;
  padding: 4px;
}

.border {
  border: 1.5px solid;
  border-radius: 5px;
  padding: 10px;
}

.table {
  border: 1.5px solid;
  border-radius: 5px;
}

.small {
  width: 50px;
}

#answer-container {
  display: flex;
  border: 1.5px solid;
  border-radius: 5px;
  width: 20%;
  margin: 5px;
}

.table {
  display: table;
  border-spacing: 0.5em;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  font-size: 15px;
  padding: 0px 2px 1px 1px;
  vertical-align: middle;
}

.ziel1 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ziel1 .blank {
  width: 40px;
}

<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.js"></script>
<div class="container">
  <div id="answer-container">
    <ul id="answer-container1">
      <li data-value="plays" class="drop">plays </li>
      <li data-value="don't smoke" class="drop">don't smoke </li>
      <li data-value="hates" class="drop">hates </li>
    </ul>
  </div>
  <div id="test-container" class="col-sm-6" style="height:300px">
    <div class="table">
      <div class="table-row">
        <div class="table-cell small">Johnny</div>
        <div class="table-cell border ziel" id="ziel1">
          <ul class="ziel1">
            <li class="blank"></li>
          </ul>
        </div>
        <div class="table-cell">Jazz.</div>
        <div class="table-cell" id="result1"></div>
      </div>
      <div class="table-row">
        <div class="table-cell small">Gerhard</div>
        <div class="table-cell border ziel" id="ziel2">
          <ul class="ziel1">
            <li class="blank"></li>
          </ul>
        </div>
        <div class="table-cell">football.</div>
        <div class="table-cell" id="result2"></div>
      </div>
      <div class="table-row">
        <div class="table-cell small">We</div>
        <div class="table-cell border ziel" id="ziel3">
          <ul class="ziel1">
            <li class="blank"></li>
          </ul>
        </div>
        <div class="table-cell">Marihuana.</div>
        <div class="table-cell" id="result3"></div>
      </div>
    </div>
    <button type="submit" id="submitButton" class="btn-lg btn-primary " value="submit">Check</button><button type="submit" id="resetButton" class="btn-lg btn-success" onclick="refreshPage()">Neustart</button>
  </div>
</div>

Вы слишком усложнили некоторые свои циклы. Также строка:

arr = jQuery(".ziel").text().split("  ").slice(0, -1);

не дала бы вам нужных вам результатов. Ваш селектор выбрал бы много элементов и был бы слишком неоднозначным, чтобы .text() работал должным образом.

Вам необходимо выполнить итерацию каждого из элементов и добавить в текстовое значение pu sh массив.

Подробнее:

• https://api.jquery.com/jquery.each/
• https://api.jquery.com/each/