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

Question

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

单击链接时，我将 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>

我的代码可以工作，但现在我收到一个控制台错误，指出 var outerVar = uid; 中未定义 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>  

Answer 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?