Facebook Javascript如何使用JQuery在加载时显示变量

Question

我如何使用FBJS做以下琐碎的事情。

我有以下代码...我正在尝试在加载时以html显示文本：

  var hero_text_under_photo = 'Hero 1'
  var hero_2_text_under_photo = 'Hero 2'
  var hero_3_text_under_photo = 'Hero 3'
  var hero_4_text_under_photo = 'Hero 4'

  console.log(hero_text_under_photo);
    $('#hero_1_text_under_photo').setTextValue(hero_text_under_photo);
    $('#hero_2_text_under_photo').setTextValue(hero_2_text_under_photo);
    $('#hero_3_text_under_photo').setTextValue(hero_3_text_under_photo);
    $('#hero_4_text_under_photo').setTextValue(hero_4_text_under_photo);

我可以使用console.log读取变量，但是直到单击它们，我才能看到设置的值。 我怎样才能解决这个问题？

<div id="whatsNew">
    <h2>What's New</h2>
    <ul id="topics" class="topics">
        <li class="topic tab1 topicSelected" onclick="rotator.loadIndex(0); rotator.stop()">
            <p id="hero_1_text_under_photo"></p>
        </li>
        <li class="topic tab2" onclick="rotator.loadIndex(1); rotator.stop()">
  <p id="hero_2_text_under_photo"></p>
        </li>
        <li class="topic tab3" onclick="rotator.loadIndex(2); rotator.stop()">
              <p id="hero_3_text_under_photo"></p>
        </li>
        <li class="topic tab4" onclick="rotator.loadIndex(3); rotator.stop()">
              <p id="hero_4_text_under_photo"></p>

Answer 1

将您的代码放入

$(document).ready(function() {
   //Code here
});

DOM完全加载后，将执行内部代码

Answer 2

首先，您应该包装JavaScript代码，以便在准备好文档时执行它。 您可以执行以下操作：

$(function() { //define a function to execute on document ready
 //your code here
});

下一步是使用正确的jQuery方法。 据我所知， setTextValue不是一种方法； 而是使用text() ，所以最终代码将是：

$(function(){
  var hero_text_under_photo = 'Hero 1'
  var hero_2_text_under_photo = 'Hero 2'
  var hero_3_text_under_photo = 'Hero 3'
  var hero_4_text_under_photo = 'Hero 4'

  console.log(hero_text_under_photo);
    $('#hero_1_text_under_photo').text(hero_text_under_photo);
    $('#hero_2_text_under_photo').text(hero_2_text_under_photo);
    $('#hero_3_text_under_photo').text(hero_3_text_under_photo);
    $('#hero_4_text_under_photo').text(hero_4_text_under_photo);
});

您可以在这里看到一个小提琴。

另外，值得注意的是，您应避免使用onclick属性将事件附加到DOM节点。 而是使用jQuery以编程方式连接事件； 这可以使您的HTML更加整洁，并遵循不引人注目的javascript的范例。 您可以这样做：

$("#your_selector").click(function() {
    //your event handling code here
});

Answer 3

您不能将jQuery与FBJS一起使用。 您必须使用document.getElementById（id）.setTextValue（）。

如果要使用jQuery，则需要切换到iframe画布。

Answer 4

没有称为setTextValue方法，使用html或text方法来设置dom元素内的任何内容。 尝试这个

$(function(){

 var hero_text_under_photo = 'Hero 1'
  var hero_2_text_under_photo = 'Hero 2'
  var hero_3_text_under_photo = 'Hero 3'
  var hero_4_text_under_photo = 'Hero 4'

  console.log(hero_text_under_photo);
    $('#hero_1_text_under_photo').text(hero_text_under_photo);
    $('#hero_2_text_under_photo').text(hero_2_text_under_photo);
    $('#hero_3_text_under_photo').text(hero_3_text_under_photo);
    $('#hero_4_text_under_photo').text(hero_4_text_under_photo);

});