使用 jquery 的动态 JavaScript

Question

<div id="text">some text</div>

<img src="#" onclick="$.function('http://url.com?q=some+text')"/>

我希望使用上一段中的文本使 q= 成为动态的。我可以将文本放入变量中

var str = $("#text").text();

，但很难动态输出它。

---

编辑：

这比我想象的要简单得多，从达林的回答中找出了解决方案：

  <div id="text"><p>Testing text to speech</p></div>
  <div id="textlink"></div>
  <img src="#" onclick="$.sound.play('http://translate.google.com/translate_tts?q='+ str)" />
<script>
var str = $("#text").text(); 
</script>

只需要知道如何附加变量。谢谢

Answer 1

让我在黑暗中拍摄：

<img src="#" onclick="window.location.href = 'http://url.com?q=' + encodeURIComponent($('#text').text());" />

或者如果您想动态分配此src：

<img src="#" id="foo"/>

然后：

$(function() {
    $('#foo').click(function() {
        window.location.href = 'http://url.com?q=' + encodeURIComponent($("#text").text());
    });
});

Answer 2

我认为你想做的事情的开始：

$('img').click(function(){
    var str = $("#text").text();
    alert('http://url.com?q=' + str);
});

或者maayyyyybe：

$('img').click(function(){
    var str = $("#text").text();
    window.location = 'http://url.com?q=' + encodeURIComponent(str);
});

甚至：

$('img').click(function(){
    var str = $("#text").text();
    this.src = 'http://url.com?q=' + encodeURIComponent(str);
});

Fiddle：http ://jsfiddle.net/maniator/UrDRX/
（适用于 HTML5 浏览器，编辑颜色代码）

等等......

Answer 3

关注点分离。在这种情况下，您希望将行为 (javascript) 与内容 (html) 和样式 (css) 分开。 - http://en.wikipedia.org/wiki/Separation_of_concerns

所以... onclick="x();" 不是首选。相当：

$(document).ready(function(
 $("#buttonId").click(function() { 
    var val = $("#text").text();
    var url = 'http://url.com?q=' + encodeURIComponent(val);

    alert(url); // or window.location or whatever you want to accomplish
 });
));

Answer 4

也许，如果您想使用该段落的整个文本内容：

var str = encodeURIComponent($('#text').text());

$('#linkId').attr('href','http://url.com?q=' + str);

JS Fiddle demo。