使用Javascript取消隐藏元素

Un-hide an element with Javascript

本文关键字：元素 隐藏 取消 Javascript 使用      更新时间：2023-09-26

我有两个选项可供选择。如果用户选择"案例管理器"作为选择#1的选项，那么选择#2的选项就会出现（它目前对用户隐藏）。

哈姆尔：

= form_tag app_configurations_path, :method=> 'put' do |f|
  -@all_configurations.each do |config|
      =hidden_field_tag "config_ids[]", config.id
      %label= t('workflow.duplicate_claim_manager')
      = select_tag('duplicate_claim[case_manager]', options_for_select(@case_managers_drop_down, config.configuration_value),name: "config[#{config.id}]", :include_blank => true)
      %label.hidden(for="duplicate_claim_manager_secondary")
      = hidden_field('duplicate_claim_manager_secondary', options_for_select(@case_managers_drop_down, config.configuration_value),name: "config[#{config.id}]", :include_blank => true)

Haml看起来是正确的，但我无法让Javascript正确地取消隐藏选择#2的选项。有什么想法吗？

if ($("#duplicate_claim_case_manager :selected").text() == "Case Manager") {
   $("#duplicate_claim_manager_secondary).setAttribute(type => text)
}

您可以考虑使用jQuery令人敬畏的.toggle()方法。就其本身而言，如果某个元素当前正在显示，它将隐藏该元素，如果该元素当前正在隐藏，它将显示该元素。这不是你想要的。

但.toggle()也有一种秘密的力量。您可以将布尔值作为参数传递给它。如果这个布尔值是truthy，那么它将显示元素，如果它是false，它将隐藏元素。

您可以将输入始终保持为文本字段，并在默认情况下隐藏它（使用style="display: none;"属性），或者在页面加载时使用JavaScript。

然后你可以使用这样的代码：

var isCaseManager = $("#duplicate_claim_case_manager :selected").text() === "Case Manager";
$("#duplicate_claim_manager_secondary").toggle(isCaseManager);

此行不对$("#duplicate_claim_manager_secondary).setAttribute(type => text)

setAttribute语法：

element.setAttribute（名称、值）；

要更改属性，请使用：$("#duplicate_claim_manager_secondary).setAttribute("type", "text")

参考文献：

  • w3schools
  • MDN

但是，要真正隐藏或显示元素，最好使用jQuery更改css display属性，即：

$("#duplicate_claim_manager_secondary").show()

和

$("#duplicate_claim_manager_secondary").hide()；

我不知道这是否是一个简单的转录错误，但您在以下块中缺少了一个结束引号：

此：

if ($("#duplicate_claim_case_manager :selected").text() == "Case Manager") {
    $("#duplicate_claim_manager_secondary).setAttribute(type => text)
}

应该是这样的：

if ($("#duplicate_claim_case_manager :selected").text() == "Case Manager") {
    $("#duplicate_claim_manager_secondary").setAttribute(type => text); //Added closing quotation mark
}

要使对象可见，请删除display css属性或将其设置为所需模式。若要使对象不可见，请将其css显示属性设置为none。

标准JavaScript:

document.getElementById("duplicate_claim_manager_secondary").style.display = "none"; //Hide
document.getElementById("duplicate_claim_manager_secondary").style.display = "";     //Make Visible

jQuery:

$("#duplicate_claim_manager_secondary").toggle(); // Toggle visibility
//Or...
$("#duplicate_claim_manager_secondary").show(); // Make Visible
$("#duplicate_claim_manager_secondary").hide(); // Hide
相关文章：