Question

我正在尝试制作一个“Speak”按钮，该按钮基本上应该读取前一个div的文本内容。

例如，我有：

<div id="text1">Lorem ipsum</div>
<button id="btn">Speak</button>
<div id="text2">This is the second block</div>
<button id="btn">Speak</button>

并使用此类javascript代码

<script type="text/javascript">
var btn = document.getElementById('btn');
speechSynthesis.cancel()
var u = new SpeechSynthesisUtterance();
var text_to_read = document.getElementById('step1');
jQuery.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); 
if(!jQuery.browser.chrome){
 u.rate = .2;
}
u.text = text_to_read.textContent;

btn.onclick = function () {speechSynthesis.speak(u);};
</script>

现在，不要在这一行中使用“step1”：var text_to_read = document.getElementById（'step1'）;我需要在按钮之前检索div上的文本。

希望它足够清楚。

抱歉，我不是JS编码员。

Answer 1

使用jQuery非常简单：

$(document).ready(function(){
    $('.btn').click(function(){
        alert($(this).prev().text());
    });
});

DEMO：https://jsfiddle.net/u4wmt9Lf/

注意：我也将重复的ids更改为classes。

修改

试试这个纯JavaScript版本，它应该适合你：

var buttons = document.getElementsByClassName('btn'); for(var i = 0, len = buttons.length; i < len; i++) { buttons[i].onclick = function (e) { var prev = e.target.previousElementSibling; var text = prev.innerText || prev.textContent; alert(text); } }

DEMO：https://jsfiddle.net/lmgonzalves/u4wmt9Lf/11/

Answer 2

$(document).ready(function(){
    $('.btn').click(function(){
            speechSynthesis.cancel()    ;
      var text_to_read = $(this).prev().text();
        var u = new SpeechSynthesisUtterance(text_to_read);
   speechSynthesis.speak(u); if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
     u.rate = .2;
    }
    u.text = text_to_read.textContent;

    });

});


<div id="text1">Lorem ipsum</div>
<button class="btn">Speak</button>
<div id="text2">This is the second block</div>
<button class="btn">Speak</button>

试试这个

已更新

如何制作一个按钮来读取div的文本

2 个答案: