Question

我已经读过这些：

JQuery - appending variable to URL, and use it in a href

passing variable value to href argument in anchor tag

我正在从Free Code Camp做随机报价生成器挑战。我需要能够发出推文，所以网址需要动态生成报价。

目前我正在：

jQuery的：

var tweeturl = 'http://twitter.com/intent/tweet?text=\"' + val.Quotation + '\"" - ' + val.Quotee;
$('a').attr('href', tweeturl);

HTML： <a href="" class="btn btn-large"><i class="fa fa-twitter icon-2x"></i>Tweet this quote</a>

这会创建一个链接，但在codepen上，这个链接是：http://s.codepen.io/boomerang/9dda6df1e553faa3c7a252865ea3fb4f1464125909489/index.html?editors=1010所以绝对不是我想要的。

失败的其他解决方案：

1）将HTML中的href设为href="#"（相同结果）

2）将attr部分设为$('a').attr({'href', tweeturl});（额外的波浪形括号） - codepen会出错并且不会运行它

3）一个人在jQuery中说$('#a_tag_id').attr('href','http://www.google.com&jobid='+id);（第二个参数来自另一个页面，obv.mine将是tweeturl）但他从未指定如何处理A标签在HTML中。提问的人有<a id="a_tag_id">something_here</a>但是，没有任何href值，当您将鼠标悬停在该位置时，该按钮甚至不显示浏览器左下角的位置。添加一个空的href值会产生与上面相同的位置，即codepen回旋镖。另外，添加＃的<a id="#a_tag_id">something_here</a>也不起作用。

有人可以帮忙吗？欢呼声。

Answer 1

将链接本身附加到适当的区域，不要只添加href。像这样......

根据codepen示例进行修改

<强> HTML

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <title>Random Quote Generator</title>
</head>

<body>
  <div class="container-fluid">
    <div class = "row text-center">
        <h2>Random Quote Generator</h2>
    </div>

    <div class="row text-center">
        <div class="col-xs-12 quote">
            <h2>"Press the Quote button for a new quote"</h2>
            <h2>Tom Dean</h2>
        </div>
    <div>

    <div class = "row text-center">
        <div class = "col-xs-12">
            <button id = "getQuote" class = "btn btn-large">
                Quote me happy!
            </button>
        </div>
    </div>

    <div class = "row text-center">
        <div class = "col-xs-12">
            <div id="tweetitout">
            </div>  
        </div>
    </div>
</body>

<强> JAVASCRIPT

  $(document).ready(function() {

    // if these are in the getJSON function then it doesn't prevent the same quote being shown twice

    var lastQuote = "";
    var whichQuoteToChoose = "";

    $("#getQuote").on("click", function() {
      $.getJSON("http://codepen.io/thomasdean/pen/Yqmgyx.js", function(json) {

        var html = "";

        // this while loop and lastQuote assignment prevents the same quote twice in a row

        while (whichQuoteToChoose === lastQuote) {
          whichQuoteToChoose = Math.floor(Math.random() * 12); // returns a number between 0 and 11
        }
        lastQuote = whichQuoteToChoose;

        // this converts raw data into html. The filter makes it only return one value

        json = json.filter(function(val) {
          return (val.id == whichQuoteToChoose);
        });

        json.forEach(function(val) {

          html += "<div class = 'quote'>"

          html += "<h2>\"" + val.Quotation + "\"</h2><h2>" + val.Quotee + "</h2>"

          html += "</div>"

          var tweeturl = 'http://twitter.com/intent/tweet?text=' + encodeURIComponent(val.Quotation + ' - ' + val.Quotee);

          $('#tweetitout').html('<a href="'+tweeturl+'" class="btn btn-large"><i class="fa fa-twitter icon-2x"></i>Tweet this quote</a>');
        });



        $(".quote").html(html); // this doesn't work if the previous two lines are present. Why?

      });
    });
  });

使用jQuery将参数传递给A HTML对象（基本上是url或HREF） - 如何？

1 个答案: