點擊信息框顯示

我已經搜索了3個小時，找不到解決方案。所有即時消息都是當你點擊一個表單中的輸入字段時，一側的信息框會顯示出來。我試圖搞亂jQuery，只是無法讓它工作，即使我確定代碼是正確的（我們不是總是哈哈）。點擊信息框顯示

無論如何，ID欣賞任何解決方案。

我在的jQuery/CSS/HTML的嘗試看起來像這樣

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html> 
<head> 
<style> 
    .infoBubble { 
     visibility:hidden; 
     color:#000; 
    } 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 
    $('.box').click(function() { 
     $('.infoBubble').css({'visibility':'visible'}); 
    }); 
</script> 
</head> 
<body> 

    <form action="process.php" method="get"> 

      <div class="row"> 
       <span class="label">Description: </span> 
       <input type="text" name="description" id="description" class="box" /><span class="infoBubble">Specific information related to this input</span> 
      </div> 

     </form> 

</body> 
</html>

來源

2011-06-30 user29660

嘗試以下操作：

$('.box').click(function(){ 
    $('.infoBubble').toggle(); 
});

順便說。隱藏/顯示某物的css屬性不是visibility，而是display。例如：

display: none;

或

display: block;

來源

2011-06-30 11:52:20

知名度是有效的。 'visibility：hidden'隱藏一個元素，但不會將其從文檔流中移除。 'display：none'隱藏一個元素並將其從頁面流中移除。 http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone –

當屬性仍然在頁面佔用相同的間距和位置，但不可見時使用visibilty。顯示完全刪除它。 – user29660

首先，文件加載完畢之前，這意味着輸入字段不存在正在執行你的JavaScript。將您的代碼附加到jQuery的ready事件中，以防止發生這種情況。

$(function() { 
    $('.box').click(function() { 
     $('.infoBubble').css({'visibility':'visible'}); 
    }); 
}

其次，隱藏visiblity: hidden的元素仍然佔用佈局空間。通常你會使用display: none使它看起來好像該元素根本就不存在。無論哪種方式，您都可以使用show方法使元素可見。

CSS：

.infoBubble { 
    color: #000; 
    display: none; 
}

的JavaScript：

$('.infoBubble').show();

第三，有可能是你的用戶集中在輸入不點擊它（例如，通過壓片）！通過使用focus事件而不是click，您可以不管顯示消息。

$('.box').focus(function() { 
    $('.infoBubble').show() 
});

除上述外，你還可以使用blur事件隱藏信息，當用戶不再集中於輸入（當他們點擊其他地方，或跳格出來的）。一起你最終得到這樣的事情：

$(function() { 
    $('.box').focus(function() { 
     $('.infoBubble').show(); 
    }).blur(function() { 
     $('.infoBubble').hide(); 
    }); 
}

來源

2011-06-30 11:54:47

準備事件的代碼是？基於你的答案，我發現這個，它的工作，謝謝你的答覆。 $（document）.ready（function（）{ – user29660

@ user29660：'$（function（）{'是'$（document）.ready（function（）{'的簡寫版本。 –

點擊信息框顯示

回答

相關問題