Question

我有一个div，其中用户输入的电子邮件ID由逗号分隔，我想在输入有效的电子邮件时将其标记为background-color:green，用户输入逗号以显示下一个电子邮件地址，我＆＃ 39;虽然我的函数是用逗号按下来调用但是我仍然坚持应用它但是我无法通过jquery在css中应用样式这是我的代码

＆＃13;

$('.team-btn').click(function() {
  $('.team-intro').replaceWith($(".team-invite").clone().show());

  $('#invite-emails').keydown(function(event) {
    if (event.keyCode === 188) {
      $val = $(this).val();
      $(this).val.apply("<span style='background-color:green'>");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="team-intro">
  <p>XXXX is a Free to use, Invite your team and get started today</p>
  <button class="team-btn">Invite Now</button>
</div>

<div class="team-invite" style="display:none;">
  <p>Enter emails and we will invite your mates to join you.</p>
  <input type="text" id='invite-emails' name='email' placeholder='enter emails here' size="30">
  <br>
  <!--<div data-value=""  id='style-email' style="padding-left: 12px; padding-right: 12px;">-->
  <p id='subtext'>You can enter multiple emails with comma</p>
</div>

＆＃13;

Answer 1

你无法申请＆＃39; val()函数的任何内容。您也无法在input的值内添加HTML，并由渲染器解释。

要设置元素的样式，最好添加/删除预定义的CSS类。试试这个：

＆＃13;

$('.team-btn').click(function() {
  $('.team-intro').replaceWith($(".team-invite").clone().show());

  $('#invite-emails').keydown(function(event) {
    if (event.keyCode === 188) {
      $(this).addClass('foo');
    }
  });
});

＆＃13;

.foo { background-color: #0C0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="team-intro">
  <p>XXXX is a Free to use, Invite your team and get started today</p>
  <button class="team-btn">Invite Now</button>
</div>

<div class="team-invite" style="display:none;">
  <p>Enter emails and we will invite your mates to join you.</p>
  <input type="text" id='invite-emails' name='email' placeholder='enter emails here' size="30">
  <br>
  <!--<div data-value=""  id='style-email' style="padding-left: 12px; padding-right: 12px;">-->
  <p id='subtext'>You can enter multiple emails with comma</p>
</div>

＆＃13;

Answer 2

您可能需要使用$(this).val.apply("<span style='background-color:green'>");代替$('.team-btn').click(function(){ $('.team-intro').replaceWith($(".team-invite").clone().show()); $('#invite-emails').keydown(function (event) { if (event.keyCode === 188) { $val = $(this).val(); $(this).css({'background-color' : 'green'}); } else { $(this).css({'background-color' : ''}); } }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="team-intro">
            <p>XXXX is a Free to use, Invite your team and get started today</p>
            <button class="team-btn">Invite Now</button>
        </div>

        <div class="team-invite" style="display:none;">
            <p>Enter emails and we will invite your mates to join you.</p>
            <input type="text" id='invite-emails' name='email'  placeholder='enter emails here' size="30">
            <br>
            <!--<div data-value=""  id='style-email' style="padding-left: 12px; padding-right: 12px;">-->
            <p id='subtext'>You can enter multiple emails with comma</p>
        </div>

{{1}}

Answer 3

要在JQuery中应用css样式，可以使用.css()方法

如何通过jquery

3 个答案: