尝试将链接放在JQuery String中时出错

时间:2015-12-06 20:02:51

标签: jquery html

我试图在我认为称为jquery字符串的地方放置一个链接。但问题是,当我这样做时,链接不会出现。有人可以向我解释我将如何这样做吗?

这是我试图放置链接的地方:

  var textarray = [
     "<a title=\"The TREWS\" href=\"https://www.youtube.com/watch?v=_17f7Abylvw\">
     The TREWS</a>";
  ];

我试过了:

 $("a").attr("href", "http://www.google.com/")

没有成功

我试过了:     &#34; https://www.youtube.com/watch?v = _17f7Abylvw \&#34;&gt; TREWS&#34 ;; 但这不起作用

有没有人有解决方案?我试着在google中进一步搜索但是我不理解的一些单词/词汇

由于

jsfiddle:https://jsfiddle.net/e4zgzpjq/

3 个答案:

答案 0 :(得分:0)

代码中存在语法错误,请从数组中删除;

var textarray = ["<a title=\"The TREWS\"
                   href=\"https://www.youtube.com/watch?v=_17f7Abylvw\">The TREWS
                  </a>"; // <-- remove this extra ;
  ];

下面的工作示例

&#13;
&#13;
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Example</title>
  
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  

<style>

body {-webkit-animation: pulse 200s infinite;animation: pulse 15s infinite;}

@-webkit-keyframes pulse {
    0% {background:#ffffff}
    3% {background:#ffffff}
    30% {background:#ffffff}
    60% {background:#ffffff}
    90% {background:#ffffff}
    100% {background:#ffffff}
}

@keyframes pulse {
    0% {background:#ffffff}
    3% {background:#ffffff}
    30% {background:#ffffff}
    60% {background:#ffffff}
    90% {background:#ffffff}
    100% {background:#ffffff}
}

.color-lightgrey
{
color: #E3E3E3;
letter-spacing: 0.6px;
margin-left: 1.5vw;
font-size: 2vw;
float: right;
font-style: italic;
}

.copypaste
{
font-size:1vw;
/*text-align:center;*/
/*vertical-align:middle;*/
text-align:-moz-center;
text-align:-webkit-center;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
display:table-cell;
vertical-align:middle;
padding-bottom: 6px;
}

.container
{    
/*position: absolute;*/
vertical-align:middle;
margin: auto;
display: table;
height: 100vh;
}
	
	
#random_text
{
font-size:3vw;
letter-spacing: 0.6px;
/*text-align:center;*/
/*vertical-align:middle;*/
text-align:-moz-center;
text-align:-webkit-center;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
display:table-cell;
vertical-align:middle;
padding-left: 5vw;
padding-right: 5vw;
}

    </style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div id="random_text"></div>
</div>
    <script type="text/javascript">
$(window).load(function() {

  $(window).resize(function() {
    var windowHeight = $(window).height();
    var containerHeight = $(".container").height();
    $(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
  });

  var textarray = ["<a title=\"The TREWS\" href=\"https://www.youtube.com/watch?v=_17f7Abylvw\">The TREWS</a>"
  ];
  
  var firstTime = true;

  function RndText() {
    var rannum = Math.floor(Math.random() * textarray.length);
    if (firstTime) {
      $('#random_text').fadeIn('fast', function() {
        $(this).html(textarray[rannum]).fadeOut('fast');
      });
      firstTime = false;
    }
    $('#random_text').fadeOut('fast', function() {
      $(this).html(textarray[rannum]).fadeIn('fast');
    });
    var windowHeight = $(window).height();
    var containerHeight = $(".container").height();
    // $(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
  }

  $(function() {
    // Call the random function when the DOM is ready:
    RndText();
  });
  var inter = setInterval(function() {
    RndText();
  }, 3000);
});
    </script>
</body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

首先,您需要在执行任何操作之前将字符串解析为html

http://api.jquery.com/jquery.parsehtml/

准备好html后,您可以更改属性。并摆脱;同样。

答案 2 :(得分:0)

我还要指出语法错误。那个jsfiddle不起作用,对于初学者来说,jquery应该在外部资源中定义。这是一个非常简单的jsfiddle版本,可以在不使用数组的情况下添加链接。希望它能帮助您指明正确的方向。

jsfiddle.net/duu8a7tx/

$(document).ready(function() {
  // one way to do it
  $('#random_text').html('<a title="The TREWS" href="https://www.youtube.com/watch?v=_17f7Abylvw">The TREWS</a>');

  // another way
  var link = $('<a>The TREWS</a>');
  link.attr('href', 'https://www.youtube.com/watch?v=_17f7Abylvw');
  link.attr('title', 'The TREWS');
  $('#random_text2').html(link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="random_text">this text wont show</div>
<div id="random_text2">this text wont show</div>