Question

首先，我检查了与我的问题类似的每个主题，不幸的是，我还没找到答案。我试图结合一些调味料，但我没有成功。（注意：刚开始学习jQuery）

所以这是我的问题：

我创建了一个包含四个文本输入和一个按钮的表单。每个输入都有一个svg图标和一个占位符文本。

HTML：

<div class="first-field">
<input class="text" type="text" placeholder="Uw naam.." value="">
<svg class="unfilled" id="svg_user">
</svg>
</div>

（我删除了svg数据，因为它不相关。）

svg图标与占位符颜色相同。输入的文字颜色稍微浅一些。我想将svg图标的颜色更改为与输入文本相同的颜色，但仅在输入内容时。

首先，我尝试在输入内容时发出警报，以检查是否知道何时输入了内容。我使用了jQuery网站上的一个例子：

$( ".text" ).change(function() {
alert( "Handler for .change() called." );
});

这不起作用，因此对于文档来说，它应该是。

我在堆栈上找到了这个解决方案，但这也无法工作：

$(document).ready(function () {
$('.text').keyup(function () { alert('test'); });
});

如果没有警报，我无法继续构建解决方案。快速摘要：

SVG图标需要更改为与输入文本相同的颜色，但仅在输入内容时。删除后，它应该更改回占位符文本的颜色。

现在，我感谢大家的帮助。

Answer 1

需要在document.ready包装器中包装代码的原因是因为代码想要在加载时立即运行。通常，代码在创建DOM之前运行（即页面已完全呈现） - 因此代码需要访问的某些元素尚未存在 - 代码中断。

以下是使用document.ready包装器的示例：

<强> HTML：

<div class="first-field">
    <input class="text" type="text" placeholder="Uw naam.." value="" />
    <svg class="unfilled" id="svg_user"></svg>
</div>

<强>的javascript / jQuery的：

var ran=0;
$(document).ready(function() {

    $('.text').keyup(function(e) { 
        if (ran == 0){
            ran++;
            alert('test');
        }
    });

}); //END document.ready

Working jsFiddle

但是，如果HTML是通过javascript或通过AJAX（通过.load()）或类似的方式注入的，那么用户事件将不会触发任何代码运行。

在这种情况下，有一个简单的解决方案：使用jQuery＆＃39; .on()方法。

var ran=0;
$(document).ready(function() {

    $(document).on('keyup', '.text', function(e) { 
        if (ran == 0){
            ran++;
            alert('test');
        }
    });

}); //END document.ready

上述小变化：

$(document).on('keyup', '.text', function(e) {

将事件处理程序绑定到文档本身，并告诉它监视涉及类keyup的元素的任何.text事件。

Modified jsFiddle

其中一个应该可以正常工作。

请注意，为您构建的示例包含CHECK，因此keyup操作不会执行多次。您可以删除它并让代码对每个按键执行某些操作：

$(document).ready(function() {

    $('.text').keyup(function(e) { 
        alert('test');
    });

}); //END document.ready

Answer 2

我找到了解决问题的方法！我发现jQuery无法处理普通的类＃39;并且＆＃39; id＆＃39;。所以方法.addClass（）和.removeClass（）不会工作。

使用.attr（）方法添加新的（默认）类的工作是什么。这是代码：

$(function(){
  $('.text').keyup(function(){
      if ($(this).val() == '') { //Check to see if there is any text entered
           //If there is no text within the input then add class 'unfilled'
            $("#svg_user").attr("class", "unfilled");
      } else {
           //If there is text in the input, then change the class from 'unfilled' to 'filled'
            $("#svg_user").attr("class", "unfilled filled");
      }
 });
});

Thnx为你帮助我开始了！

如果输入了输入元素中的值，请使用jQuery检查

2 个答案: