當我使用jQuery單擊其他元素時如何向元素添加類

Question

我有一個input ，應該在clicked將其類別添加到ID為#zip另一個元素中。 這是代碼：

 $('#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> 

我不知道為什么上面的jQuery無法正常工作。

Answer 1

您忘記為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> 

Answer 2

您的代碼正常工作

可能有兩個問題：

1. 您缺少添加jQuery參考的方法：

2. 您應該將代碼包裝在document.ready事件中：

   $（function（）{$（'＃billing_zip'）。click（function（）{$（'＃zip'）。addClass（'clicked'）;}）;}）;

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');
 });
});