Question

如果用户从下拉菜单中选择泰米尔语语言，但如果用户选择英语，我想隐藏语音回复元素 >，则应隐藏语音响应元素。

它不起作用，我不知道为什么。请给我一个关于我的代码有什么问题的建议。

这是我的代码：

function Speech(say) {
  if ('speechSynthesis' in window && talking) {
    $('#clitamilhide').hide();

    var utterance = new SpeechSynthesisUtterance(say);
    speechSynthesis.speak(utterance);
  }

}

var msg = new SpeechSynthesisUtterance(ans);
window.speechSynthesis.speak(msg);

<select name="language_" id="langu" class="selectpicker form-control form-control-sm" style="width: 300px;  margin-top: 125px;">
  <option value="English">
    English
  </option>
  <option value="Tamil">
    Tamil
  </option>
</select>

在线

var msg = new SpeechSynthesisUtterance(ans);

将使用后端响应，并且该响应将转到speech()函数，以语音作为输出响应。

主要问题是我想在函数speech(say)中隐藏Tamil选项标签值。

Answer 1

根据您的描述 （如果我理解正确） ，以下示例可以根据您的需要进行自定义。

更改select标签的选项，您将看到该示例根据当前选择的选项隐藏/显示了示例元素。

快速下载：

当用户运行您的网站/网络应用程序时，我们会检查当前选择的选项，如果它是英语，那么我们可以，如果不是，我们隐藏“语音响应”元素（无论哪种元素都是您的最终实现）
当用户更改当前选项时，事件侦听器还将附加到select标记以进行检测。如果是英语，则再次显示“语音响应”，否则，我们将隐藏它。

// hides the speech response
function showSpeechResponse() {
  $('.response').show();
}

// showes the speech response
function hideSpeechResponse() {
  $('.response').hide();
}

// checks what's the currently selected option
function checkSelectedOption() {
  var element = $('.selectpicker');
  
  switch ($(element).val()) {
    case 'English':
      showSpeechResponse();
      break;
      
    case 'Tamil':
      hideSpeechResponse();
      break;
  }
}

// check the initially selected option
checkSelectedOption();

// when the user selects another option, check the selected option
$('.selectpicker').on('change', checkSelectedOption);

/* your own code here ...
function speech(say) {
  if ('speechSynthesis' in window && talking) {
    $('#clitamilhide').hide();

    var utterance = new SpeechSynthesisUtterance(say);
    speechSynthesis.speak(utterance);
  }
}

var ans = 'The answer';
var msg = new SpeechSynthesisUtterance(ans);
window.speechSynthesis.speak(msg);
*/

.selectpicker {
  /*margin-top: 125px;*/
  width: 300px;
}

.response {
  margin-top: 15px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="language_" id="langu" class="selectpicker form-control form-control-sm">
  <option value="English">English</option>
  <option value="Tamil" >Tamil</option>
</select>

<div class="response">Speech Response</div>

注意

我希望您想要这样的东西，至少要使用一个起点，如果我输错了，请告诉我，我们将找出更好的解决方案。

根据所选选项显示/隐藏元素

1 个答案:

注意