[英]how to add a class to an element when i click a different element with jquery
I have an input
that is supposed to add a class of clicked
to another element with an id of #zip
when clicked. 我有一个input
,应该在clicked
将其类别添加到ID为#zip
另一个元素中。 Here is the code: 这是代码:
$('#billing_zip').click(function () { $('#zip').addClass('clicked'); });
#zip { color: #444; font-style: italic; position: absolute; top: 8px; left: 35px } .clicked { display: none; }
<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>
I don't know why the above jQuery is not working. 我不知道为什么上面的jQuery无法正常工作。
You forgot to declare id for billing_zip. 您忘记为billing_zip声明ID。
$(document).ready(function(){ $('#billing_zip').click(function () { alert('hi'); $('#zip').addClass('clicked'); }); });
#zip { color: #444; font-style: italic; position: absolute; top: 8px; left: 35px } .clicked { display: none; }
<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>
Your code is working OK 您的代码正常工作
It could be 2 possible issues: 可能有两个问题:
You are missing to add the jQuery reference: 您缺少添加jQuery参考的方法:
You should wrap your code inside the document.ready
event: 您应该将代码包装在document.ready
事件中:
$(function(){ $('#billing_zip').click(function () { $('#zip').addClass('clicked'); }); }); $(function(){$('#billing_zip')。click(function(){$('#zip')。addClass('clicked');});});
Check out the jsfiddle here. 在这里查看jsfiddle 。 Use document.ready if required. 如果需要,请使用document.ready。 One important point i found out is that, if the placeholder text on input box is lengthy, then it covers up entire input box area and doesn't allow to trigger click event. 我发现的一个重要点是,如果输入框上的占位符文本很长,那么它将覆盖整个输入框区域,并且不允许触发单击事件。 refer the jsfiddle. 请参考jsfiddle。
$('#billing_zip').click(function () {
$('#zip').addClass('clicked');
});
$('#zip').click(function () {
$('#zip').addClass('clicked');
});
If this only what you want. 如果这只是你想要的。 Then you can do directly like: 然后,您可以直接执行以下操作:
$('#billing_zip').click(function () {
$('#zip').css("display","none"); // or you can use hide or fadeout property.
});
When I wrapped your jQuery code in a "$(document).ready" it worked: 当我将您的jQuery代码包装在“ $(document).ready”中时,它起作用了:
$(document).ready(function(){
$('#billing_zip').click(function () {
$('#zip').addClass('clicked');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.