Question

我有一个input，可以在点击时将clicked类添加到ID为#zip的其他元素。这是代码：

＆＃13;

$('#billing_zip').click(function () {
    $('#zip').addClass('clicked');
});

＆＃13;

#zip {
    color: #444;
    font-style: italic;
    position: absolute;
    top: 8px;
    left: 35px
}
.clicked {
    display: none;
}

＆＃13;

<div class="chkField">
        <label for="billing_zip">Zip</label>
        <input type="text" onchange="clearContent(this);check_address('billing');" class="txtBoxStyle hasPlaceholder" tabindex="10" size="10" value="" id="billing_zip" maxlength="15" name="billing_zip">
        <!--START: req_billing_zip--> 
        <img width="12" height="12" alt="" src="assets/templates/common/images/error2.gif"> 
        <!--END: req_billing_zip-->
        <div class="clear"></div>
        <div id="zip">zip</div>
      </div>

＆＃13;

我不知道为什么上面的jQuery无效。

Answer 1

您忘记为billing_zip申报ID。

＆＃13;

$(document).ready(function(){
$('#billing_zip').click(function () {
    alert('hi');
    $('#zip').addClass('clicked');
});
});

＆＃13;

#zip {
    color: #444;
    font-style: italic;
    position: absolute;
    top: 8px;
    left: 35px
}
.clicked {
    display: none;
}

＆＃13;

<div class="chkField">
        <label id="billing_zip" for="billing_zip">Zip</label>
        <input type="text" onchange="clearContent(this);check_address('billing');" class="txtBoxStyle hasPlaceholder" tabindex="10" size="10" value="" id="billing_zip" maxlength="15" name="billing_zip">
        <!--START: req_billing_zip--> 
        <img width="12" height="12" alt="" src="assets/templates/common/images/error2.gif"> 
        <!--END: req_billing_zip-->
        <div class="clear"></div>
        <div id="zip">zip</div>
      </div>

＆＃13;

Answer 2

您的代码正常运行

可能有两个问题：

您缺少添加 jQuery 引用：
您应该将代码包装在document.ready事件中：

$（函数（）{ $（'＃billing_zip'）。click（function（）{ $（ '＃拉链'）addClass（ '点击'）。 }）; }）;

Answer 3

在这里查看jsfiddle。如果需要，请使用document.ready。我发现的一个重点是，如果输入框上的占位符文本很长，则它会覆盖整个输入框区域，并且不允许触发单击事件。参考jsfiddle。

$('#billing_zip').click(function () { 
    $('#zip').addClass('clicked');
});

$('#zip').click(function () { 
    $('#zip').addClass('clicked');
});

Answer 4

如果这只是你想要的。然后你可以直接做：

$('#billing_zip').click(function () {
    $('#zip').css("display","none"); // or you can use hide or fadeout property.
});

Answer 5

当我将jQuery代码包装在“$（document）.ready”中时，它起作用了：

$(document).ready(function(){
  $('#billing_zip').click(function () {
   $('#zip').addClass('clicked');
 });
});

当我使用jquery单击其他元素时，如何向元素添加类

5 个答案: