Member 13858049 Ответов: 2

Как преобразовать этот код javascript в jquery


Мне нужно преобразовать этот код javaskript в jquery, я был бы очень благодарен за помощь:


let btn = document.getElementById("btnSend");
let form = document.getElementById("zeForm");
let input = document.getElementById("zeInput");
let msg = document.getElementById("msg");
let allowedValues = ["atown", "btown", "ctown"]; 

btn.onclick = function() {
  let allGood = false;
  
  allowedValues.forEach(function(elm) {
    if(elm === input.value) {
       allGood = true;
       return;
    }
  })

  if(allGood) {
    msg.innerHTML = "Success!!";
    msg.style.color = "green";
    
  } else {
      msg.innerHTML = "This value is not accepted";
      msg.style.color = "red";
  }
    msg.style.display = "inline";

}<


Html-код для теста:
<pre><form id="zeForm">
    <input id="zeInput" type="text" list="typ" name="name" placeholder="gtown" > 
        <datalist id="typ">
            <option value="atown">atown</option> 
            <option value="btown">btown</option> 
            <option value="ctown">ctown</option> 
        </datalist> 
    </input>
    <p id="msg"></p>
    <button id="btnSend" type="button">send</button>
  </form>


Что я уже пробовал:

I tried before but it never work correct, i wrote also some tutorials. Therefore about help i would very very grateful.

Nathan Minier

jQuery-это библиотека JavaScript...следовательно, перевод не требуется. Все это происходит в среде выполнения JS.

2 Ответов

Рейтинг:
1

Mohibur Rashid

Как сказал Натан Минье, JQuery-это просто библиотека, написанная с использованием javascript. Так что вопрос в некотором смысле странный. Но JQuery также написан в значительной степени, чтобы заменить многие общие функциональные возможности для написания кода гораздо более простым способом. Кроме того, JQuery предлагает функциональные возможности, которые решают проблемы кроссбраузерной совместимости. Я не очень хорошо разбираюсь в JQuery, но я дам вам некоторую базовую идею, основанную на вашем коде.

#$("#uniq_id_of_element"); 
# example of writing html text in an element
$("#uniq_id_of_element").html("This text"); 

# example of writing value to an input object
$("#uniq_id_of_element").val("10")

# example of reading value to an input object
var x=$("#uniq_id_of_element").val();

# example of onclick even handling
$("#uniq_id_of_element").click(function(){ console.log("I am clicked! I am clicked!"); })

# example css
$("#uniq_id_of_element").css("border-left", "1px sold gold");


Предложение:
Вы написали цикл for, чтобы проверить, есть ли в вашем поле ввода значение, назначенное в вашем массиве, которое может быть заменено на функция indexOf[^]

if(allowedValues.indexOf($("#zeInput").val()) != -1) {
 $("#msg").html("Life is beautiful!");
}


Member 13858049

Спасибо Вам за ваш ответ, однако : у меня сейчас есть попытка кода jquery , который переведен с JavaScript, этим переводом кода выше,однако он не работает с примером html (с материалом javaskript он действительно работал), он должен покрасить красный или зеленый вход, если кто-то вводит правильное слово из datalist или нет, Mabey кто-то может помочь, я не знаю теперь, что я делаю неправильно:

let btn = $("#btnSend");
let form = $("#zeForm");
let input = $("#zeInput");
let msg = $("#msg");
let allowedValues = ["atown", "btown", "ctown"]; // same values as the options in your datalist


btn.on('click' , function() {
    let allGood = false;

    allowedValues.each(function(index, element) {
        if (element === input.value) {
            allGood = true;
            return;
        }
    })

    if (allGood) {
        msg.text("Success!!");
        msg.attr('style',"color:green");
        //form.submit();
    } else {
         msg.text("This value is not accepted";
         msg.attr('style',"color:red");
    }
   msg.attr('style',"display:inline");

});

Member 13858049

я сделал перед этим собственную вопросительную нить: https://www.codeproject.com/Questions/1247127/Jquery-code-does-not-work

Mohibur Rashid

ОлГуд сфера общества в фикцию. И вы упускаете момент выполнения последовательности

Mohibur Rashid

эта часть должна быть внутри функции щелчка

if (allGood) {
        msg.text("Success!!");
        msg.attr('style',"color:green");
        //form.submit();
    } else {
         msg.text("This value is not accepted";
         msg.attr('style',"color:red");
    }

Рейтинг:
1

Patrice T

Цитата:
Как преобразовать этот код javascript в jquery

Как уже было сказано, jquery написан на javascript, это всего лишь набор средств, предназначенных для облегчения вашей жизни в качестве программиста.
Таким образом, вы должны изучить jquery и посмотреть, какая часть будет соответствовать вашим потребностям.
учебник по jQuery[^]