我需要帮助使用在Jquery中定义全局变量将变量从链接传递给函数

时间:2015-06-03 22:15:09

标签: javascript jquery freemarker

原谅我的措辞,但这是我第一次写这样的东西

我在点击链接时将freeMarker变量传递给JQuery函数

<a onclick="showDisclaimer('${item.uid}')">Read the blog</a>

变量传递正常,但我想要做的是在单击链接时显示隐藏模态。隐藏模态的名称是

<div class="disclaimer ${item.uid}" style="display:none;">

代码似乎不起作用。首先,我想定义一个全局变量,以便两个函数都可以访问。如你所见,我正在定义var x = uid;两次。

同样在我的代码$('body')。append($('div.disclaimer x')。remove());不起作用,我认为这是因为我还没有传递变量或创建了一个全局变量。我只是不知道该怎么做。

我的代码如下。任何帮助表示赞赏。感谢

<#ftl ns_prefixes={"content":"http://purl.org/rss/1.0/modules/content/","dc":"http://purl.org/dc/elements/1.1/"}>

    <script>
      // Forces the disclaimer component to load on the body

      $('body').append($('div.disclaimer x').remove());

      function showDisclaimer (uid) { 
        var x = uid;
        $('div.disclaimer x').show();

      }

      function closeDisclaimer(uid) {
        var x = uid;
        // Clear the form and close the modal
        $('div.disclaimer x').hide();
      }
    </script>  


    <section style="background-color: #ededed">
      <section class="head-transit">
        <div class="container">
            <div class="row-fluid">

          <#list kiblogs.rss.channel.item as item>
              <div class="span4">
                <div class="panel">
                  <img src="${item.thumbnail.@@nested_markup}" class="title-image"> 
                    <div class="top-content">
                      <h3>${item.title}</h3>
                      <div class="datetime">${item.pubDate}</div>
                      <div class="analyst"></div>
                      <p class="test">${item.description}</p>                  
                    </div>

                    <div class="disclaimer ${item.uid}" style="display:none;">
                      <div class="content">
                        <div class="close"><a href="#" onclick="closeDisclaimer()">x</a></div>
                          <h3>${item.title}</h3>
                          <div class="datetime">${item.pubDate}</div>
                          <p class="test">${item.description}</p>
                           <p class="${item.uid}">Hey now</p>  
                          <div class="divider"></div>                      
                      </div>
                    </div> 

                    <div class="bottom-content">
                    <div class="bottom-blue-buttn"><a onclick="showDisclaimer('${item.uid}')">Read the blog</a></div>
                   </div>
                </div>
               </div> 
                <div class="disclaimer ${item.uid}" style="display:none;">
                  <div class="content">
                    <div class="close"><a href="#" onclick="closeDisclaimer()">x</a></div>
                      <h3 class="title2"></h3> 
                      <div class="divider"></div>
                      <p class="content2"></p>

                  </div>
                </div>            
            <hr>            
          </#list>

          </div>
       </div>
      </section>
    </section>

我得到了代码,但现在我收到一个控制台错误,即uid未在var outerVar = uid中定义;但是uid是在我的第一个和第二个函数中定义的。

在我的第一行代码中         

      var outerVar = uid;

      $('body').append($('div.disclaimer' + outerVar).remove());

      function showDisclaimer (uid) { 
        var x = uid;
        $('div.disclaimer' + x).show();

      }

      function closeDisclaimer(uid) {
        var x = uid;
        // Clear the form and close the modal
        $('div.disclaimer' + x).hide();
      }


    </script>  

1 个答案:

答案 0 :(得分:1)

css选择器错误。您需要连接x变量。

      function showDisclaimer (uid) { 
        var x = uid;
        $('div.disclaimer' + x).show();

      }

      function closeDisclaimer(uid) {
        var x = uid;
        // Clear the form and close the modal
        $('div.disclaimer' + x).hide();
      }

重用变量的示例:

var outside = 'Fooo!';
function foo () { 
    console.log(outSide); //output 'Fooo!'
}

function bar() {
    var inside = 'Hello';
    console.log(inside); //output 'Hello'
}

console.log(inside); //output undefined

有关更多信息: What is the scope of variables in JavaScript?