选择其他元素时无法隐藏 div答案

【问题标题】：Having trouble hiding a div when other elements are chosen选择其他元素时无法隐藏 div
【发布时间】：2020-12-31 00:08:43
【问题描述】：

选择按钮状态选择时，我正在使用以下JavaScript隐藏DIV，但是我在内容管理系统上使用此代码。该代码有效，但只有在我重新加载页面之后（在我做出正确的选择之后）。我相信我使用模糊和更改的方式可能会出现问题。我相信这可能是在不重新加载的情况下进行更改更新的关键，但我不确定。任何帮助将不胜感激：

var choice = $('#Choice').val();  
var myDiv = $('#myDiv');  

if(choice == 'Option 1'){  
  $(myDiv).hide().blur().change();  
} else {  
  $(myDiv).show().blur().change();  
}

下面是我定位的按钮的代码：

选项1 选项 2

【问题讨论】：

请提供更多关于您的情况的背景信息。您显示的代码何时执行（事件处理程序的一部分）？另外，包括相关的 HTML。
它不是事件处理程序的一部分。我不确定是否有一个事件处理程序可以帮助满足我的需要。 'choice' 变量是一个带有多个选项的按钮，当被选中时会隐藏 myDiv div。最终，我将需要添加其他变量（单选按钮，而不是按钮状态），这些变量需要完全选择以隐藏该 div。但我只是从第一个选项开始，看看如何让更改与服务器通信。提供的代码不在函数或事件处理程序中，因为它确实需要在 CMS 中。
那么为什么不在有选择的元素上设置一个change 事件处理程序呢？此代码在较大文档中的什么位置？它什么时候运行？请显示相关的 HTML。
我还需要将选项作为按钮选项中的特定选项。更改仅适用于任何选项选择，对吗？
在我们提供更多细节之前，您确实需要编辑您的问题，添加相关的 HTML 并回答我的其他问题：您在较大的 JavaScript 中插入的代码在哪里？什么时候运行？

标签： javascript jquery blur

【解决方案1】：

看来您需要做的只是为您的select 元素设置一个change 事件处理程序。然后，在该处理程序中，只需检查选择 - 如果它是您关心的，隐藏div，如果不是，显示它。您无需触发blur 或change，因为用户会为您执行此操作。

这是一个例子：

$("select").on("change", function(){
  if(this.value === "Choice 2"){
    $("div").hide();
  } else {
    $("div").show();  
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option>Choice 1</option>
  <option>Choice 2</option>
  <option>Choice 3</option>
</select>

<div>I will hide when Choice 2 is selected and show otherwise</div>

【讨论】：

【解决方案2】：

我认为您对 jQuery 的一些方法有一些误解。你可能想要这个：

const myDiv = $('#myDiv');  

$('#Choice').change(function() {

    const choice = $(this).val();
    
    if (choice === 'Option 1') {  
        myDiv.hide();  
    } else {  
        myDiv.show();  
    }

});

我不确定你的按钮“状态”是什么，所以在你向我们展示你正在做什么之后，这可能需要调整。

【讨论】：

效果很好。非常感谢。您知道我如何检测是否为单选按钮提供了值吗？我需要确保一个按钮完全有价值。我猜我可以通过检测值的长度来做到这一点。
没问题。请拨打tour。新问题不适用于 cmets。
@tmd257 所有 HTML 表单输入元素都包含字符串，要检查元素是否没有值，您需要检查是否没有字符串。这是通过检查""（一个空字符串）来完成的。