Невозможно полностью изменить класс jquery - PullRequest
Новая
       10

Невозможно полностью изменить класс jquery

0 голосов
/ 07 сентября 2018

Я пытаюсь создать систему смайликов, в которой файл emoji.css будет хранить смайлики. Имена всех смайликов хранятся в действительно массиве javascript, хотя и немного изменены. Когда пользователи вводят текст смайликов (что-то вроде: emoji:,: another-emoji:) Javascript должен проверить, находится ли этот текст в массиве emoji, если он есть, он автоматически превратится в emoji.

По крайней мере, это то, что я пытаюсь сделать

Это шаги того, что должно произойти

  1. Загрузка страниц
  2. Пользовательские входные данные для ввода с классом 'input'

  3. Если текст в массиве называется emoji, JavaScript 

     i.Alerts the name of the input

 ii.Says 'it is in array'

 iii.Copy the text into a div with class 
    `see`

 iv.Text in div automatically becomes an array`

И я думаю, что здесь проблема.

В файле emoji.css все смайлики имеют классы с именами, такими как em em-abc, em em-woman, но когда пользователи хотят вызвать смайлик, они должны ввести текст с : спереди и сзади, как :abc:, :woman:, поэтому jquery должен автоматически изменить эту входную строку (:abc:) на класс emoji.css (em em-abc), и я использовал эту строку кода, чтобы сделать это

$(".see").addClass("em em-"+$(".see").html().split(":").pop()).removeClass(".see"); вот мой полный код: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rad emojis</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <link href="emoji.css" rel="stylesheet">

</head>
<body>
 <div class ="see em-abc"></div>

 <input class="input">
 <div class ="see"></div>
  <div class ="see2"></div>
    <div class ="see3"></div>

<div class="add"></div>



<script>
var emoji = [ ":abc:", ":woman",":eye:", <!--it was much longer than this--> ];

var input=$(".input");
var input2=$(".input").val();



 $(input).change(function(){

$(".see").html( $(".input").val());


if(jQuery.inArray($(".input").val(), emoji) != -1) {

var see="."+$(".see").html();
$(".see2").html(see);

var classs =see+"";

alert($(".see").html());

var real=$(".see").html().split(":").pop();
$(".see3").html(real);


 $(".see").toggleClass("em em-"+$(".see").html().split(":").pop());

    $(".see").addClass("em em-"+$(".see").html().split(":").pop()).removeClass(".see");

    alert("is in array");
    alert($(".see").html());
} else {
    alert("is NOT in array");


} 

});






</script>

</body>
</html>

1 Ответ

0 голосов
/ 07 сентября 2018

Когда вы удаляете класс с помощью метода removeClass, вы должны опустить точку.

Просто используйте 

    $(".see").addClass("em em"+$(".see").html().split(":").pop()).removeClass("see");
...