将数据从 <p> 标记的生成值传递到 twitter 小部件 text-data 属性答案

【问题标题】：Pass data from generated value of <p> tag to twitter widget text-data attribute将数据从 <p> 标记的生成值传递到 twitter 小部件 text-data 属性
【发布时间】：2016-03-28 04:09:25
【问题描述】：

我正在尝试将数据从我的p 标签传递到新推文中的data-text 属性。问题是标签内显示的数据是从数组生成的，而我的 twitter 小部件无法识别动态值。

这里是JS Fiddle

<!--   <div id="DIV1">This is the first quote</div>   -->
<p id="DIV1"></p>
<script>
    var arr = ["This is first quote", 
              "This is second quote", 
              "This is third quote", 
              "This is fourth quote", 
              "This is fifth quote"];

    function choseRandQuote() {
        var  randomQuote = Math.floor(Math.random()*(arr.length)); 
        document.getElementById('DIV1').innerHTML = arr[randomQuote];
    } 

</script>

<div class="button-place"> <!-- /reserved exclusevly for button-->
    <button id="btn-gnr" class="btn" onclick="choseRandQuote();">Generate!</button>
</div><!-- /end .button -->
<br />
<br />
<div id="twtbtn"></div>
<!-- and-->
<script>
    var MyDiv1 = document.getElementById('DIV1').innerHTML;
    window.twttr = (function(d, s, id) {
        var t, js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;

        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);

        return window.twttr || (t = {
            _e: [],
            ready: function(f) {
                t._e.push(f)
            }
        });
    }(document, "script", "twitter-wjs"));

    twttr.ready(function(twttr) {
        twttr.widgets.createShareButton(
            'http://twitter.com',
            document.getElementById('twtbtn'),
            function(el) {
                console.log("Button created.")
            }, 
            {
                count: 'none',
                text: "Quote: " + MyDiv1,
                via: 'alex_ryzhuk',
                hashtags: 'FreeCodeCamp'
            }
        );

        twttr.events.bind('tweet', function(event) {
            console.log(event, event.target);
        });
    });
</script>

【问题讨论】：

标签： javascript arrays twitter attributes widget

【解决方案1】：

您的推文按钮在 dom 加载时呈现，因此您的 div 为空。每次更改报价时都需要重新生成推文按钮。

<!--   <div id="DIV1">This is the first quote</div>   -->
<p id="DIV1"></p>
  <script>
var arr = ["This is first quote", 
			  "This is second quote", 
			  "This is third quote", 
			  "This is fourth quote", 
			  "This is fifth quote"];
 
function choseRandQuote() {
	var  randomQuote = Math.floor(Math.random()*(arr.length)); 
	document.getElementById('DIV1').innerHTML = arr[randomQuote];
   addTwitter();
	} 
        </script>
<div class="button-place"> <!-- /reserved exclusevly for button-->
                <button id="btn-gnr"
                        class="btn"
                        onclick="choseRandQuote();"> 
                    Generate! 
                </button>
                </div><!-- /end .button -->
<br />
<br />
<div id="twtbtn"></div>

<script>
  
function addTwitter(){
var MyDiv1 = document.getElementById('DIV1').innerHTML;
window.twttr = (function(d, s, id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = {
    _e: [],
    ready: function(f) {
      t._e.push(f)
    }
  });
}(document, "script", "twitter-wjs"));
twttr.ready(function(twttr) {
  twttr.widgets.createShareButton(
    'http://twitter.com',
    document.getElementById('twtbtn'),
    function(el) {
      console.log("Button created.")
    }, {
      count: 'none',
      text: "Quote: " + MyDiv1,
      via: 'alex_ryzhuk',
      hashtags: 'FreeCodeCamp'
    }
  );
  twttr.events.bind('tweet', function(event) {
    console.log(event, event.target);
  });
});
}
addTwitter();
</script>

【讨论】：

【解决方案2】：

jquery方法：

$(".btn-tweet").click(function () {
        var width  = 575,
        height = 400,
        left   = ($(window).width()  - width)  / 2,
        top    = ($(window).height() - height) / 2,
        url    = 'http://twitter.com/share?text=' + $info.quote + " - " + $info.author,
        opts   = 'status=1' +
                 ',width='  + width  +
                 ',height=' + height +
                 ',top='    + top    +
                 ',left='   + left;

        window.open(url, 'twitter', opts);
    });

Example

【讨论】：